茉莉兰亭


偏安一隅

Nginx项目部署（nodejs与vue）

  • ~4.50K 字
  • 次阅读

nginx上部署项目，在nginx.conf中新建server即可，但为了防止频繁改动nginx.conf出现某些重大失误或使配置文件难以管理，这里采取独立配置每个站点配置文件的方式

前期处理

新建配置文件目录

我选在conf文件夹下新建目录

1
2
cd /usr/local/nginx/conf
mkdir vhost

在nginx.conf的http内引入vhost中的所有.conf结尾的配置

1
include vhost/*.conf;

切换到vhost文件夹

1
cd vhost

vue项目部署

项目文件上传到服务器

先将vue项目打包

1
npm run build

通过ftp工具将打包生成的dist文件夹丢到服务器的某个地方，比如/var/www

新建站点配置文件

方便起见，直接以域名+端口号命名配置文件（取名困难症）

1
vim test.uimentama.com.conf

配置文件内容

1
2
3
4
5
6
7
8
9
10
11
12
server {
    #监听端口号
    listen 80;
    #目标域名
    server_name test.uimentama.com;

    location / {
        #dist文件夹存放的完整路径
        root /var/www;
        try_files $uri $uri/ /index.html;
    }
}

这样，当访问 test.uimentama.com:80 时，就可以打开vue项目了（前提域名要设置云解析+备案）

开启gzip压缩

若vue项目打包时未配置gzip压缩，那么打包生成的项目将会比较大，当服务器带宽很差劲时会出现很久才能打开网站的情况，因此需要在服务器上配置gzip压缩

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
#以下代码写在上面代码中的server内部即可（不要写在location里面！）

#开启gzip压缩
gzip on;
#不压缩临界值，大于1K的才压缩，一般不用改
gzip_min_length 1k;
#buffer，就是，嗯，算了不解释了，不用改
gzip_buffers 4 16k;
#用了反向代理的话，末端通信是HTTP/1.0,默认是HTTP/1.1
#gzip_http_version 1.0;
#压缩级别，1-10，数字越大压缩的越好，时间也越长，看心情随便改吧
gzip_comp_level 9;
#进行压缩的文件类型，缺啥补啥就行了，JavaScript有两种写法，最好都写上吧，总有人抱怨js文件没有压缩，其实多写一种格式application/javascript 就行了
gzip_types text/plain application/javascript application/x-javascript text/css application/xml text/javascript application/x-httpd-php image/jpeg image/gif image/png;
#跟Squid等缓存服务有关，on的话会在Header里增加"Vary: Accept-Encoding"
gzip_vary off;
#IE6对Gzip不怎么友好，不给它Gzip了
gzip_disable "MSIE [1-6]\.";

代码来自Nginx开启Gzip压缩功能（附详细解释）+测试是否开启了压缩

重新加载nginx配置文件使其生效

1
systemctl reload nginx

访问test.uimentama.com，打开成功

node项目部署

服务器环境下的node安装等不做赘述不会就去问问万能的百度啊

项目上传至服务器并启动

首先将整个node项目通过ftp工具丢到服务器某个位置，例如/var/www/node

切换到node项目目录下（test-node为项目名）

1
cd /var/www/node/test-node

通过pm2进程守护启动node项目，取名为pm2-test-node

1
pm2 start npm --name pm2-test-node -- run stage

*pm2相关参考另一篇文章：pm2及其常用命令

打开浏览器，输入http://服务器公网ip:node运行的端口，node做出响应，即为成功

但这样太丑了而且不方面前台进行接口调用，因此配置nginx配置文件，来做到访问某个域名，将其代理至127.0.0.1:node运行端口

新建站点配置文件

同上，在vhost下新建配置文件，文件名为域名+端口号（node运行在哪个端口就写哪个端口号）

1
vim /usr/local/nginx/conf/vhost/node.uimentama.com:8888.conf

配置文件内容

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
server {
    #监听端口号
    listen 80;
    #目标域名
    server_name node.uimentama.com;

    # 添加路由api
    location /api {
        #代理配置，访问node.uimentama.com:80/api 时等于访问http://127.0.0.1:8888
        proxy_pass http://127.0.0.1:8888;
        #是否开启缓存
        proxy_buffering off;
    }

}

重新加载nginx配置文件使其生效

1
systemctl reload nginx

然后就可以通过http://node.uimentama.com/api来调用node应用了

配置https

首先需要准备好证书文件的下载，即xxx.pem和xxx.key文件。参考各自购买证书所在平台提示，下载对应域名证书文件。

上传证书文件

在nginx配置文件目录，新建cert文件夹存放证书

1
2
cd /usr/local/nginx/conf
mkdir cert

通过ftp工具将证书和密钥文件上传至cert文件夹

修改nginx配置文件

以上面vue项目部署配置文件test.uimentama.com.conf为例修改

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
server {
    listen 80; #监听http的默认80端口
    server_name test.uimentama.com; #配置访问域名
    rewrite ^(.*)$ https://$host$1; #将所有HTTP请求通过rewrite指令重定向到HTTPS。
}

server {
    #监听端口号，80修改为443，443为https默认端口
    listen 443;
    #目标域名
    server_name test.uimentama.com;

    #gzip相关配置（可选，这里省略）

    #ssl证书相关配置
    ssl_certificate     cert/114514_test.uimentama.com.pem; #证书位置
    ssl_certificate_key  cert/114514_test.uimentama.com.key; #私钥位置
    ssl_session_cache    shared:SSL:10m;
    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; #表示使用的TLS协议的类型。
    ssl_prefer_server_ciphers  on;

    location / {
        #dist文件夹存放的完整路径
        root /var/www;
        try_files $uri $uri/ /index.html;
    }
}

可以看出，没有做太多修改，除了新增了ssl的相关配置外，仅将端口由80替换为443，并新增了访问80端口即http网址自动转发至https网址，其他原封不动

证书文件路径应相对于nginx的配置文件nginx.conf填写，因为站点配置文件最终是被引入到nginx.conf中执行的

然后重新加载nginx配置文件并重启nginx即可

1
systemctl reload nginx

错误提示

1、nginx: [emerg] the ssl parameter requires ngx_http_ssl_mod

参考：nginx 添加http_ssl_module模块

该错误提示nginx未安装http_ssl_mod模块，需要前去安装

进入nginx解压目录

1
cd /usr/local/nginx/nginx-1.21.0/

查看已安装模块

1
nginx -V

添加http_ssl_mod及已安装模块，重新编译nginx

1
./configure --prefix=/usr/local/nginx --with-http_ssl_module

不要执行 make install，会覆盖掉之前配置好的nginx
备份原先已安装的nginx

1
cp /usr/local/nginx/sbin/nginx /usr/local/nginx/sbin/nginx.bak

停止nginx主程序

1
systemctl stop nginx

或者

1
nginx -s quit

把新编译的nginx主程序覆盖掉原来的

1
cp objs/nginx /usr/local/nginx/sbin/nginx

重启nginx即可

1
systemctl reload nginx

或者

1
nginx -s reload

443端口被apache占用

若事先安装过apache并处于启动中，会出现443端口占用问题，当然可以直接杀掉apache进程，但我希望两者同时运行，这时就需要修改apache配置文件了

1
vim /etc/httpd/conf.d/ssl.conf

修改最上面的Listen 443 https为Listen 8081 https即可

本作品采用 知识共享署名-相同方式共享 4.0 国际许可协议 进行许可