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

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

相关推荐
光影少年13 分钟前
vue2与vue3的全局通信插件,如何实现自定义的插件
前端·javascript·vue.js
As977_15 分钟前
前端学习Day12 CSS盒子的定位(相对定位篇“附练习”)
前端·css·学习
susu108301891117 分钟前
vue3 css的样式如果background没有,如何覆盖有background的样式
前端·css
ajsbxi17 分钟前
苍穹外卖学习记录
java·笔记·后端·学习·nginx·spring·servlet
Ocean☾18 分钟前
前端基础-html-注册界面
前端·算法·html
Rattenking18 分钟前
React 源码学习01 ---- React.Children.map 的实现与应用
javascript·学习·react.js
Dragon Wu20 分钟前
前端 Canvas 绘画 总结
前端
CodeToGym25 分钟前
Webpack性能优化指南:从构建到部署的全方位策略
前端·webpack·性能优化
~甲壳虫26 分钟前
说说webpack中常见的Loader?解决了什么问题?
前端·webpack·node.js
~甲壳虫30 分钟前
说说webpack proxy工作原理?为什么能解决跨域
前端·webpack·node.js