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

Question

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

我在“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;
        }

}

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

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

}

Default 和 node 都链接到启用站点的…

我目前遇到的问题是：

当我 go 到/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":....

现在我 go 回到 /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 的 Build 版本一起工作。

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

再次感谢！

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

如果一切正常，output 应该是：

nginx：配置文件/etc/nginx/nginx.conf语法没问题 nginx：配置文件/etc/nginx/nginx.conf测试成功

然后使用以下命令重新启动您的 nginx：

sudo nginx -s reload

缓存清理您的浏览器，然后重试。