vue.js - 如何将 Vue JS 网站部署到基于 Ubuntu 的 VPS？

Question

我有一个基于 Linux Ubuntu 的 VPS。
我有两个网站。
我有两个网站的两个域名。
一个域名为 trail-notes.tk 的网站已成功部署到 VPS，并且在配置文件中没有任何端口的服务器上运行。网站运行良好。问题在于我想在特定端口 4000 上运行的第二个网站，但在我的服务器的同一 IP 地址上
当我完成所有配置并点击 control-surface.ml 时，它返回错误“502 Bad Gateway”

如何正确部署 Vue 应用程序/网站？
nginx 的第一个网站 trail-notes.tk 的配置文件:

    server {
    listen 80;
    server_name trail-notes.tk www.trail-notes.tk;
    root /home/kentforth/webapps/trail-notes/dist;
    index index.html index.htm;

    location / {
        root /home/kentforth/webapps/trail-notes/dist;
        try_files $uri $uri/ /index.html;
    }

    error_log  /var/log/nginx/vue-app-error.log;
    access_log /var/log/nginx/vue-app-access.log;
}

我已经做了什么:

创建 Vue 项目

在 vue 项目“vue.config.js”中创建配置文件

向此文件添加端口配置:
模块.exports = {
开发服务器:{
端口:4000
}
};

推送代码到github
5.进入我的VPS服务器

从 github 克隆的目录

安装必要的依赖项:
npm 安装——生产

为构建项目安装了 Vue CLI
npm i @vue/cli-service

为生产构建了 dist 文件夹:
npm 运行构建

在目录/etc/nginx/sites-available/创建文件 control-surface-frontend.conf

向该文件添加了配置:
服务器 {

listen 80;
server_name control-surface.ml www.control-surface.ml;

root /home/kentforth/webapps/vue-test/dist;    


index index.html;
charset utf-8;


location / {

    proxy_pass http://localhost:4000;
    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; 

}


location = /favicon.ico { access_log off; log_not_found off; }

}

该文件的激活符号链接(symbolic link):
sudo ln -s/etc/nginx/sites-available/control-surface-frontend.conf/etc/nginx/sites-enabled/control-surface-frontend.conf

测试的符号链接(symbolic link):
须藤 nginx -t

重启nginx:
sudo systemctl 重启 nginx

15.检查nginx是否正在运行:

我做错了什么？

Answer 1

我为 nginx 制作了错误的配置文件。
这是我正确的 nginx 配置文件，我的网站运行良好:

server {
    listen 80;
    listen [::]:80;
    server_name trail-notes.tk www.trail-notes.tk;
    root /home/kentforth/webapps/trail-notes/dist;
    index index.html index.htm;

    location / {
        try_files $uri $uri/ /index.html;
    }

    error_log  /var/log/nginx/vue-app-error.log;
    access_log /var/log/nginx/vue-app-access.log;
}