将 Vue 项目快速部署至 Nginx 访问

1. 安装 Nginx

CentOS 7为例:

# 安装 epel 库,若已安装则跳过
> sudo yum install epel-release

# 安装 nginx
> sudo yum install nginx

> sudo yum info nginx
Loaded plugins: fastestmirror, langpacks
Loading mirror speeds from cached hostfile
 * epel: mirrors.njupt.edu.cn
Installed Packages
Name        : nginx
Arch        : x86_64
Epoch       : 1
Version     : 1.16.1
Release     : 1.el7
Size        : 1.6 M
Repo        : installed
From repo   : epel
Summary     : A high performance web server and reverse proxy server
URL         : http://nginx.org/
License     : BSD
Description : Nginx is a web server and a reverse proxy server for HTTP, SMTP, POP3 and
            : IMAP protocols, with a strong focus on high concurrency, performance and
            : low memory usage.

> rpm -qa | grep nginx
nginx-mod-mail-1.16.1-1.el7.x86_64
nginx-1.16.1-1.el7.x86_64
nginx-mod-http-image-filter-1.16.1-1.el7.x86_64
nginx-all-modules-1.16.1-1.el7.noarch
nginx-mod-stream-1.16.1-1.el7.x86_64
nginx-mod-http-perl-1.16.1-1.el7.x86_64
nginx-filesystem-1.16.1-1.el7.noarch
nginx-mod-http-xslt-filter-1.16.1-1.el7.x86_64

启动服务设置开机自启(如果需要):

> sudo systemctl start nginx  # 启动 nginx 服务
> sudo systemctl enable nginx # 设置开机自启
  • 网页目录:/usr/share/nginx/
  • 配置文件:/etc/nginx/

2. 复制 dist 目录

一般在 Vue 项目中,执行npm run build或其他类似命令,会生成dist目录,即为我们需要部署的 Web 项目文件

首先在 Vue 项目的根目录下进行构建

idv-web> pwd
/home/idv-web

idv-web> yarn run build # 或 npm run build 等类似命令

idv-web> ls hl
total 536K
-rw-r--r--    1 root root   53 Jan  7 17:28 babel.config.js
drwxr-xr-x    2 root root   22 Jan  7 17:28 build
drwxr-xr-x    3 root root   57 Jan 12 17:40 dist # dist 目录即为需要部署的文件
-rw-r--r--    1 root root  766 Jan  7 17:28 jest.config.js
-rw-r--r--    1 root root  137 Jan  7 17:28 jsconfig.json
-rw-r--r--    1 root root 1.1K Jan  7 17:28 LICENSE
drwxr-xr-x    2 root root   75 Jan 10 10:34 mock
drwxr-xr-x 1050 root root  32K Jan  7 17:30 node_modules
-rw-r--r--    1 root root 2.0K Jan  7 17:28 package.json
-rw-r--r--    1 root root  197 Jan  7 17:28 postcss.config.js
drwxr-xr-x    2 root root   43 Jan  7 17:28 public
-rw-r--r--    1 root root 3.2K Jan  7 17:28 README-en.md
-rw-r--r--    1 root root 7.1K Jan  7 17:28 README.md
drwxr-xr-x   13 root root  230 Jan  7 20:56 src
drwxr-xr-x    3 root root   18 Jan  7 17:28 tests
-rw-r--r--    1 root root 4.3K Jan  7 22:29 vue.config.js
-rw-r--r--    1 root root 434K Jan  7 17:30 yarn.lock

之后dist目录复制到nginx的网页目录下

idv-web> cp -r ./dist /usr/share/nginx/idv-web

idv-web> cd /usr/share/nginx/

nginx> ls -hl
total 0
drwxr-xr-x 3 root root 136 Jan 15 11:27 html
drwxr-xr-x 3 root root  57 Jan 15 11:30 idv-web
drwxr-xr-x 2 root root 143 Jan 15 11:27 modules

3. 添加配置文件

Nginx 的配置文件位于/etc/nginx目录下:

> cd /etc/nginx/

nginx> ls -hl
total 68K
drwxr-xr-x 2 root root   26 Jan 15 17:19 conf.d
drwxr-xr-x 2 root root    6 Oct  3 13:15 default.d
-rw-r--r-- 1 root root 1.1K Oct  3 13:15 fastcgi.conf
-rw-r--r-- 1 root root 1.1K Oct  3 13:15 fastcgi.conf.default
-rw-r--r-- 1 root root 1007 Oct  3 13:15 fastcgi_params
-rw-r--r-- 1 root root 1007 Oct  3 13:15 fastcgi_params.default
-rw-r--r-- 1 root root 2.8K Oct  3 13:15 koi-utf
-rw-r--r-- 1 root root 2.2K Oct  3 13:15 koi-win
-rw-r--r-- 1 root root 5.2K Oct  3 13:15 mime.types
-rw-r--r-- 1 root root 5.2K Oct  3 13:15 mime.types.default
-rw-r--r-- 1 root root 2.5K Oct  3 13:15 nginx.conf
-rw-r--r-- 1 root root 2.6K Oct  3 13:15 nginx.conf.default
-rw-r--r-- 1 root root  636 Oct  3 13:15 scgi_params
-rw-r--r-- 1 root root  636 Oct  3 13:15 scgi_params.default
-rw-r--r-- 1 root root  664 Oct  3 13:15 uwsgi_params
-rw-r--r-- 1 root root  664 Oct  3 13:15 uwsgi_params.default
-rw-r--r-- 1 root root 3.6K Oct  3 13:15 win-utf

主配置文件nginx.conf,内容如下:

# For more information on configuration, see:
#   * Official English Documentation: http://nginx.org/en/docs/
#   * Official Russian Documentation: http://nginx.org/ru/docs/

user nginx;
worker_processes auto;
error_log /var/log/nginx/error.log;
pid /run/nginx.pid;

# Load dynamic modules. See /usr/share/doc/nginx/README.dynamic.
include /usr/share/nginx/modules/*.conf;

events {
    worker_connections 1024;
}

http {
    log_format  main  '$remote_addr - $remote_user [$time_local] "$request" '
                      '$status $body_bytes_sent "$http_referer" '
                      '"$http_user_agent" "$http_x_forwarded_for"';

    access_log  /var/log/nginx/access.log  main;

    sendfile            on;
    tcp_nopush          on;
    tcp_nodelay         on;
    keepalive_timeout   65;
    types_hash_max_size 2048;

    include             /etc/nginx/mime.types;
    default_type        application/octet-stream;

    # Load modular configuration files from the /etc/nginx/conf.d directory.
    # See http://nginx.org/en/docs/ngx_core_module.html#include
    # for more information.
    include /etc/nginx/conf.d/*.conf;

    server {
        listen       80 default_server;
        listen       [::]:80 default_server;
        server_name  _;
        root         /usr/share/nginx/html;

        # Load configuration files for the default server block.
        include /etc/nginx/default.d/*.conf;

        location / {
        }

        error_page 404 /404.html;
            location = /40x.html {
        }

        error_page 500 502 503 504 /50x.html;
            location = /50x.html {
        }
    }

    # 省略部分配置
}

可以看到:

  • 每个server节点对应一个网站目录
  • 主配置文件会导入conf.d目录下的子配置文件
  • 每个server节点又会导入default.d目录下的配置

这样一来,只需在conf.d目录下添加网站配置即可:

注意:尽量避免使用 Chrome 中默认的非安全端口,参见 Chrome 错误代码:ERR_UNSAFE_PORT | CSDN

nginx> pwd
/etc/nginx

nginx> ls conf.d/
idv-web.conf

nginx> cat conf.d/idv-web.conf
server {
    listen 4000; # 绑定的端口
    server_name localhost;

    root /usr/share/idv-web; # 网站对应的根目录
    index index.html;

    location / {
        root /usr/share/nginx/idv-web;
        try_files $uri $uri/ @router;
        # 需要指向下面的 @router,否则 Vue 的路由在 Nginx 中刷新会报 404
        index index.html;     
    }

    # 对应上面的 @router
    # 主要原因是路由的路径资源并不是一个真实的路径, 所以无法找到具体的文件
    # 因此需要 rewrite 到 index.html 中,然后交给路由进行处理
    location @router {
        rewrite ^.*$ /index.html last;
    }   
}

4. 重新加载 Nginx

重新加载 Nginx 的配置文件 (无需重启nginx服务):

> nginx -s reload

即可通过http://<SERVER_IP>:<PORT>访问项目首页。

参考文章

  1. Nginx 部署 Vue 项目方法总结 - l大俊 | 掘金
  2. 如何在 Nginx 下部署 Vue 项目 - 片刻清夏 | CSDN
  3. 使用 Nginx 部署 Vue 项目 | asing1elife’s blog
  4. Chrome 错误代码:ERR_UNSAFE_PORT | CSDN