Nginx部署Umi React前端项目标准配置

文章目录

概要

使用UmiJs开发的前端项目打包部署在Nginx,主要是Umi中项目的配置和Nginx的配置

前端Umi项目

基于"@umijs/max": "^4.3.24", + "react": "^18.3.1"

配置文件

./.umirc.ts

typescript 复制代码
import { defineConfig } from '@umijs/max';
export default defineConfig({
  npmClient: 'yarn',
  esbuildMinifyIIFE: true,
  base: '/web/',
  publicPath: '/web/',
  favicons: ['/src/assets/favicon.png'],
});

注意文件中的 /web/

请求后端Api

./src/utils/util.tsx

typescript 复制代码
import { request as umiRequest } from 'umi';
const request = (url: string, options?: RequestConfig) => {
  return umiRequest('/api' + url, {
    ...options,
  });
};

注意文件中的 /api,最终的url应该是 /api/url 形式,即调用 request 方法的时候传参 url 应该是以 / 开头

打包

./package.json

javascript 复制代码
{
  "scripts": {
    "build": "max build",
  },
}
  • > yarn build
  • > ./dist

后端项目

普通的提供Restful Api的Http服务端即可

  • > 8888
  • > 前端项目能正常访问

Nginx配置

版本:1.26.3

配置文件

./conf/nginx.conf

powershell 复制代码
http {
    include       mime.types;
    default_type  application/octet-stream;
    server {
        listen       80;
        server_name  localhost;

		# 后端Api配置
        location /api/ {
            proxy_pass http://localhost:8888/;
            proxy_set_header Host $host;
            proxy_set_header X-Real-IP $remote_addr;
            proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
            proxy_set_header X-Forwarded-Proto $scheme;
        }

        # 前端项目打包后产生dist,将dist重命名为web,放置到/tmp下
        # 即 /tmp/web 对应下面的配置
        # 注意 /web /web/index.html 这些和前端打包时对应一致,否则会出现错误,在浏览器控制台查看
        location /web {
	    	# root /usr/local/nginx/html;
            root /tmp;
            index index.html;
            try_files $uri /web/index.html;
        }

        error_page   500 502 503 504  /50x.html;
        location = /50x.html {
            root   html;
        }
    }
}

错误信息

由于不满足以上所有配置而出现的错误信息

  • Uncaught SyntaxError: Unexpected token '<' (at preload_helper.js:1:1)Understand this errorAI
  • umi.js:1 Uncaught SyntaxError: Unexpected token '<' (at umi.js:1:1)

查看浏览器请求响应,这个对应请求JS资源的响应尽然返回的是HTML,且是 dist/index.html的内容,在页面报错需要关注 nginxerror.log 日志信息方便查错

相关推荐
JosieBook39 分钟前
【web应用】如何进行前后端调试Debug? + 前端JavaScript调试Debug?
前端·chrome·debug
LBJ辉39 分钟前
2. Webpack 高级配置
前端·javascript·webpack
灵感__idea7 小时前
JavaScript高级程序设计(第5版):好的编程就是掌控感
前端·javascript·程序员
烛阴8 小时前
Mix
前端·webgl
代码续发8 小时前
前端组件梳理
前端
试图让你心动9 小时前
原生input添加删除图标类似vue里面移入显示删除[jquery]
前端·vue.js·jquery
陈不知代码10 小时前
uniapp创建vue3+ts+pinia+sass项目
前端·uni-app·sass
小王码农记10 小时前
sass中@mixin与 @include
前端·sass
陈琦鹏10 小时前
轻松管理 WebSocket 连接!easy-websocket-client
前端·vue.js·websocket
hui函数10 小时前
掌握JavaScript函数封装与作用域
前端·javascript