CRA项目部署

对于前端开发者来说,有时候也需要将开发环境下的代码部署到生产环境中去,这个时候就需要一点nginx的知识了。本文从头开始将一个崭新的CRA前端工程部署到生产环境去中。

1. 前端项目构建

bash 复制代码
cd C:/Users//Administrator//Documents
npx create-react-app demo --template=typescript
code ./demo
# 打包之前记得在package.json中增加、修改homepage为"."即:"homepage":".",
yarn build

2. 配置nginx.conf

打开nginx配置文件nginx.conf,在http模块下新增一个服务:

nginx 复制代码
server {
  listen 80;
  server_name your_domain.com;  # 將 your_domain.com 替換為你的域名或 IP
  
  location /reminder {
      alias C:/Users/Administrator/Documents/demo/build;
      index index.html;
      try_files $uri $uri/ /reminder/index.html;
  }
}

3. 启动nginx

在nginx.exe所在的目录下面打开cmd然后执行启动命令

cmd 复制代码
nginx.exe

4. 测试

在浏览器的地址栏中输入:http://nginx所在的机器的ip地址/reminder

如果能够展示出来打包之后的效果就成功了!

相关推荐
孤水寒月4 小时前
基于HTML的悬窗可拖动记事本
前端·css·html
祝余呀4 小时前
html初学者第一天
前端·html
脑袋大大的5 小时前
JavaScript 性能优化实战:减少 DOM 操作引发的重排与重绘
开发语言·javascript·性能优化
速易达网络6 小时前
RuoYi、Vue CLI 和 uni-app 结合构建跨端全家桶方案
javascript·vue.js·低代码
耶啵奶膘6 小时前
uniapp+firstUI——上传视频组件fui-upload-video
前端·javascript·uni-app
JoJo_Way6 小时前
LeetCode三数之和-js题解
javascript·算法·leetcode
视频砖家7 小时前
移动端Html5播放器按钮变小的问题解决方法
前端·javascript·viewport功能
lyj1689977 小时前
vue-i18n+vscode+vue 多语言使用
前端·vue.js·vscode
charlee448 小时前
nginx部署发布Vite项目
nginx·性能优化·https·部署·vite
小白变怪兽9 小时前
一、react18+项目初始化(vite)
前端·react.js