美文网首页
使用nginx部署React项目

使用nginx部署React项目

作者: Y了个J | 来源:发表于2021-12-09 23:26 被阅读0次

    两种部署方式

    一、部署在nginx根目录下

    二、部署在nginx非根目录下

    在package.json里添加 "homepage": ".",如下

      "homepage": ".",
      "scripts": {
        "start": "react-scripts start",
        "build": "react-scripts build",
        "test": "react-scripts test",
        "eject": "react-scripts eject"
     },
    

    然后在添加 basename

    import {createBrowserHistory} from "history";
    
    const history = createBrowserHistory({basename: "/app"});
    export default history
    

    完成这两步后执行 yarn build 打包,生成build目录。

    把build目录上传到服务器的某个目录,比如 /usr/local/var/www 目录下,
    然后在nginx.conf里添加

    location /app {
        alias /usr/local/var/www/build;
        index index.html;
        try_files $uri /app/index.html; # 始终返回index.html
    } 
    

    执行 nginx -s reload 刷新,在页面打开 http://153.100.71.119/app,即可访问页面。

    相关文章

      网友评论

          本文标题:使用nginx部署React项目

          本文链接:https://www.haomeiwen.com/subject/febbtrtx.html