前端快速上手nginx

Rain153
516 阅读3分钟

之前面试一家公司，负责人问了我这样一个问题：

面：你平时是如何部署前端项目的？
我：将本地打包好的dist目录上传到服务器对应目录下就行了，或者用jenkins点一点就行了。
面：上传之后不需要执行什么命令吗，类似 npm run之类的？
我：静态文件为什么要执行命令？除非是node服务才需要用命令启动一下。
面：...好吧，下一个问题

面试完后我一脸懵逼，静态文件一般不都是由后端服务或者nginx服务提供访问的吗，再说了打包完成后的代码已经剔除了脚手架的代码怎么可能执行命令。后来想了想，这家公司怕不是打包完连着项目代码全扔到服务器上去了，用yarn preview运行吧。

初学前端时，我觉得拥有一个自己网站真是泰库辣！那么有没有简单一点的建站方式呢，最后我选择了宝塔面板,可视化的操作对新手十分甚至九分的友好，最初只有一个项目时他提供的默认建站方式还算方便，当拥有了多个端口服务后不想每次都去控制台放开端口，想着有没有什么东西只需要通过一个端口从外网访问就好了，nginx就出现在了你的面前（当然你可以自己写一个gateway来代理其他项目）。

不想搞懂nginx，有没有快速上手的姿势？按照下面的步骤cv再改改就ok了

  1. 安装nginx，宝塔商店直接下载安装
  2. 找到修改配置文件的地方 截图_选择区域_20230709101618.png
  3. 明确需求，是否需要https

不需要https:

#找到这一行
server{
    listen 80; #默认的http请求端口
    server_name localhost; #可以随便写
    error_page /404.html; #默认的404页面，可以换成自己写的但是要用绝对路径
    
    #一般为网站首页
    location / {
        root /xx/xxx/; #自己的网站目录，填到index.html的父级即可
        index index.html; #指定index是哪种模板
    }
    
    #其他静态页面,有多个就配置多个即可，就像history路由模式
    #用域名访问就是 http://www.baidu.com/test
    location /test {
        root /home/test/ #例如test页面
        index index.html
    }
    
    #图片等资源文件，例如assets文件夹
    location /assets {
        alias /xxx/xxx/assets; #assets绝对路径
    }
    
    #服务代理，例如运行在6666端口的node服务
    location /node {
        proxy_pass http://localhost:6666;
    }
}
#这样就可以通过域名后不同的路径访问不同的页面或服务了

需要https:

# 稍微麻烦一点，首先你需要将ssl证书下载并放到服务器中
# 将监听80的改成这样
server{
   listen 80;
   server_name  localhost;
   rewrite ^(.*)$ https://$host$1; #将所有的http请求重定向到https
}
# 找到监听的443地方
server {
    listen 443;
    server_name https-server;
    root /xxx/xxx/; #可以为网站首页的位置
    ssl_certificate  /xxx/xxx/xx.pem; #证书位置
    ssl_certificate_key /xxx/xxx/xx.key; #证书密钥位置
    ssl_session_timeout 5m;
    ssl_ciphers ECDHE-RSA-AES128-GCM-SHA256:ECDHE:ECDH:AES:HIGH:!NULL:!aNULL:!MD5:!ADH:!RC4;
    ssl_protocols TLSv1 TLSv1.1 TLSv1.2;
    ssl_prefer_server_ciphers on;
    charset utf-8;
    
    location /test {
        alias /xxx/xxx/ ; #test页面目录
        index index.html;
    }
    
    #运行在6666端口的node服务
    location /node {
        proxy_pass http://localhost:6666;
        proxy_set_header Host $host; # 修改转发请求头，让6666端口的应用可以受到真实的请求
        proxy_set_header X-Real-IP $remote_addr;
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
    }
    
}

修改完后记得重载配置使其生效，在配置的过程中如果有什么问题可以在评论区留言讨论。

avatar
文章
阅读
粉丝