如何将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;
}

我已经做了：

1. 创建的Vue项目

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

3. 已将端口配置添加到此文件：

   module.exports = { devServer：{ 港口：4000 } };

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

5. github上的克隆目录

6. 已安装必要的依赖项：

   npm install --production

7. 安装了用于构建项目的Vue CLI

   npm i @ vue / cli-service

8. 构建用于生产的dist文件夹：

   npm运行构建

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

10. 向该文件添加了配置：

    服务器{

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

    }

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

    sudo ln -s /etc/nginx/sites-available/control-surface-frontend.conf /etc/nginx/sites-enabled/control-surface-frontend.conf

12. 经过测试的符号链接：

    sudo nginx -t

1. 重新启动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;
}