前端代码部署到centos7 服务器上

项目是 Vue CLI，正式部署不要用 npm run serve，那个只是开发环境。生产环境要用：

npm run build

1. 在前端项目构建

在你的电脑或服务器上进入前端目录：

cd G:\work\ai\vigil\vigil-ops-console npm install npm run build

构建完成后会生成：

vigil-ops-console/dist

这个 dist 就是要部署到服务器的前端静态文件。

2. 上传 dist 到 CentOS 7

建议放到：

/opt/vigil/vigil-ops-console

服务器上创建目录：

mkdir -p /opt/vigil/vigil-ops-console

把本地 dist 目录里的内容上传进去。最终结构类似：

/opt/vigil/vigil-ops-console/index.html
/opt/vigil/vigil-ops-console/css
/opt/vigil/vigil-ops-console/js

注意是上传 dist 里面的内容，不是把整个 dist 文件夹套进去也行，但 Nginx 配置要对应。

3. 安装 Nginx

CentOS 7 上：

yum install -y epel-release yum install -y nginx

启动并设置开机自启：

systemctl start nginx systemctl enable nginx

4. 配置 Nginx

新建配置文件：

vi vigil.conf

写入：

server { listen 5678; server_name _; root /home/web/vigil; index index.html; location / { try_files $uri $uri/ /index.html; } location /api/ { proxy_pass http://127.0.0.1:5677/api/; proxy_http_version 1.1; proxy_set_header Host $host; proxy_set_header X-Real-IP $remote_addr; proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for; proxy_set_header X-Forwarded-Proto $scheme; } }

如果后端不在同一台服务器，把这里改成后端服务器 IP：

proxy_pass http://后端服务器IP:5677/api/;

在nginx的配置文件中http{}加载该配置，如下图

include vigil.conf;

5. 检查并重启 Nginx

nginx -t systemctl reload nginx

然后浏览器访问：

http://服务器IP:5678

6. 防火墙放行

如果服务器开了防火墙：

firewall-cmd --permanent --add-port=5678/tcp firewall-cmd --reload