将 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>访问项目首页。
