部署 Vue.js + Node + 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;
        }

}

创建了另一个名为 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 和节点都链接到启用站点...

我目前遇到的问题是：

当我转到 /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 的 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

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

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

然后重启你的 nginx：

sudo nginx -s reload

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