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

Posted 2023-02-22

【中文标题】部署 Vue.js + Node + MySQL + NginX 应用程序的问题@DigitalOcean

【英文标题】：Issue with Deploying Vue.js + Node + MySQL + NginX app @DigitalOcean

【发布时间】：2020-09-04 20:34:33

【问题描述】：

我已经使用 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 版本一起工作。

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

再次感谢！

【问题讨论】：

你能把前端正在做的请求吗？它请求的路径？

@Danizavtz 前端工作正常意味着 Vue 的路线很好，对吗？但是，当它从 API 获取数据时，它不会在 Build 版本 sudo npm run build 中引入数据，但是当我 sudo npm run serve 它 @8080 时工作正常。

是的，我想查看一些 chrome 开发工具网络选项卡，以尝试找出它请求的路由，如果有任何提示可能是什么问题。让我们在路径中说一些附加或丢失的字符串。所以我们可以映射到正确的路线。

你能测试一下答案吗？

【参考方案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

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

【讨论】：

将端口 81 文件作为一个整体注释掉...将 /Api 位置添加到端口 80 文件...相同的行为，前端加载，但表未填充数据。但是，可以从ip/Api 访问数据...但是，npm run serve @8080 不再工作了，还必须将 vue 配置文件从端口 81 更改为 80

我会在答案中解决这个问题，对不起。

终于找到了问题所在。这是一个愚蠢的问题：| “Api”是罪魁祸首：|在配置文件中它是 api 而在 NginX 中，它是带有 initicap 的“Api”。感谢您让我的 Nginx 文件更紧凑，感谢您的时间和指导

哦，所以你在我打字的时候诊断出了错误......非常感谢你！ :)

恭喜，你做到了！我会尝试删除带有合理数据的 cmets。