前后端打包+nginx报错问题汇总

前后端分离部署实践

最新推荐文章于 2024-06-20 11:25:35 发布

原创最新推荐文章于 2024-06-20 11:25:35 发布 · 300 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#java

前后端专栏收录该内容

13 篇文章

订阅专栏

本文详细介绍了在Win10环境下，使用MySQL数据库，后端IDE为IDEA，前端IDE为vscode，通过nginx进行转发的前后端分离部署过程。解决IDEA打包错误，配置nginx.conf实现端口转发，确保浏览器输入特定端口能正确访问前后端应用。

0 环境

系统环境：win10
数据库：mysql
后端IDE: IDEA
前端IDE：vscode
转发：nginx

1 前言

参考视频

2 问题解决

idea(后端)打包报错

报错 idea 报 Cannot access alimaven (http://maven.aliyun.com/nexus/content/groups/public/) in offline mod

取消work offline勾选

vue(前端)打包

vue run build

nginx转发

目标：浏览器输入xxx:8088端口通过nginx请求转发到xxx:8087这个端口上

大概流程

nginx.conf配置

server {
  # 监听地址
        listen       8088;
        server_name  127.0.0.1;

        #charset koi8-r;

        #access_log  logs/host.access.log  main;


        location ~ .*\.(js|css|ico|png|jpg|eot|svg|ttf|woff|html|txt|pdf|) {
           #所有静态文件直接读取硬盘
           root   html/dist/;
           index  index.html index.htm;
           expires 30d; #缓存30天
        }

        location / {
            # 跳转到后端的ip地址
            proxy_pass http://127.0.0.1:8087/;
            proxy_redirect default;
        }

        #error_page  404              /404.html;

        # redirect server error pages to the static page /50x.html
        #
        error_page   500 502 503 504  /50x.html;
        location = /50x.html {
            root   html;
        }
}