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

【问题标题】：How to deploy Vue JS website to Ubuntu based VPS?如何将 Vue JS 网站部署到基于 Ubuntu 的 VPS？
【发布时间】：2020-12-22 10:25:56
【问题描述】：

我有一个基于 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 = { 开发服务器：{ 端口：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 是否正在运行：

我做错了什么？

【问题讨论】：

标签： vue.js ubuntu nginx server vps

【解决方案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;
}

【讨论】：