部署 Vue.js + 节点 + MySQL + NginX 应用程序的问题@DigitalOcean

Question

我已经使用 UFW、MySQL、Node、Vue-Cli 和 NginX 设置了 Ubuntu droplet。

我在“html”中创建了一个“apps”文件夹

/var/www/html/apps/

apps 文件夹包含两个文件夹：

/var/www/html/apps/codnode /var/www/html/apps/codvue

在 codvue 文件夹中，我克隆了 Vue 应用程序对于 codnode 文件夹，我克隆了节点 api（使用端口 3001）

这里是 NginX 服务器块（或其他名称）设置。

默认服务器配置：

server {
        listen 80 default_server;
        listen [::]:80 default_server;

        root /var/www/html/apps/codvue/dist;

       # Add index.php to the list if you are using PHP
        index index.html index.htm index.nginx-debian.html;

        server_name _;
        error_page 404 /;

        location / {
                try_files $uri $uri/ =404;
        }

}

创建了另一个名为节点的服务器块：

server {
        listen 81 default_server;

        # Add index.php to the list if you are using PHP
        index index.html index.htm index.nginx-debian.html;

        server_name IPADDRESS;
        error_page 404 /;

        location / {
                proxy_set_header X-Real-IP $remote_addr;
                proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
                proxy_set_header X-NginX-Proxy true;
                proxy_pass http://127.0.0.1:3001;
                proxy_set_header Host $http_host;
                proxy_cache_bypass $http_upgrade;
                proxy_redirect off;
        }

}

默认值和节点都链接到已启用的站点...

我目前遇到的问题是：

当我转到 /var/www/html/apps/codvue/ 并使用以下方法创建构建时：

sudo npm run build

重启 Nginx 服务后，我使用 IP 地址打开网站，应用程序界面加载正常（意味着 Vue 正在运行，对吗？）。我旁边是运行另一个终端中的 Node 应用程序，它在端口 3001 上显示运行并且 Db 连接成功。

但除了 Vue 界面外，没有显示任何数据。前端工作。后端不显示。当我尝试访问此 URL: http://IPADDRESS:81/Api/category/categories-list 它显示数据：

[{"catID":1,"catName":"sabdasdv1","catDesc":"qdjqbwd","isActive":"1","date":....

现在我回到 /var/www/html/apps/codvue/ 并执行以下命令：

sudo npm run serve

该应用程序在端口 8080 上提供服务。当我打开 http://IPADDRESS:8080 时，该应用程序加载得很好......界面和数据都在那里。

有人可以指导我如何让构建版本工作吗？我在这里做错了什么？

下面是 Vue 配置文件：

const path = require('path');

module.exports = {
    // outputDir :path.resolve(__dirname, '../server/public'),
    devServer:{
        proxy:{
            '/api':{
                target: 'http://IPADDRESS:81'
            }
        }
    }
}

我觉得我错过了一个非常小但很重要的拼图，让这个东西与 Vue 的构建版本一起工作。

我们将不胜感激任何形式的帮助。感谢您花时间阅读到最后。

再次感谢！

Answer 1

让我们尝试不同的配置。

server {
        listen 80 default_server;
        listen [::]:80 default_server;

        root /var/www/html/apps/codvue/dist;

       # Add index.php to the list if you are using PHP
        index index.html index.htm index.nginx-debian.html;

        server_name _;
        error_page 404 /;

        location / {
                try_files $uri $uri/ =404;
        }
        location /api {
                proxy_set_header X-Real-IP $remote_addr;
                proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
                proxy_set_header X-NginX-Proxy true;
                proxy_pass http://127.0.0.1:3001;
                proxy_set_header Host $http_host;
                proxy_cache_bypass $http_upgrade;
        }
}

请在端口 81（整个文件）上注释带有服务器配置的块。

配置完成后，测试配置是否有语法错误：

sudo nginx -t

如果一切正常，输出应该是：

nginx: the configuration file /etc/nginx/nginx.conf syntax is ok nginx: configuration file /etc/nginx/nginx.conf test is successful

然后重启你的 nginx：

sudo nginx -s reload

清理浏览器缓存并重试。

部署 Vue.js + 节点 + MySQL + NginX 应用程序的问题@DigitalOcean

Issue with Deploying Vue.js + Node + MySQL + NginX app @DigitalOcean

nginx

node.js

digital-ocean

vue.js