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

如何解决如何将Vue JS网站部署到基于Ubuntu的VPS？

我有一个基于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”中创建的配置文件
已将端口配置添加到此文件：

module.exports = { devServer：{ 港口：4000 } };
将代码推送到github 5.进入我的VPS服务器
github上的克隆目录
已安装必要的依赖项：

npm install --production
安装了用于构建项目的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; }

}

为该文件激活的符号链接：

sudo ln -s /etc/Nginx/sites-available/control-surface-frontend.conf /etc/Nginx/sites-enabled/control-surface-frontend.conf
经过测试的符号链接：

sudo Nginx -t

重新启动Nginx：

sudo systemctl重新启动Nginx

15。检查Nginx是否正在运行：

我做错了什么？

解决方法

我为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;
}