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

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

相关推荐
前端拾光者36 分钟前
利用D3.js实现数据可视化的简单示例
开发语言·javascript·信息可视化
Json_181790144801 小时前
电商拍立淘按图搜索API接口系列,文档说明参考
前端·数据库
风尚云网1 小时前
风尚云网前端学习:一个简易前端新手友好的HTML5页面布局与样式设计
前端·css·学习·html·html5·风尚云网
木子02041 小时前
前端VUE项目启动方式
前端·javascript·vue.js
GISer_Jing1 小时前
React核心功能详解(一)
前端·react.js·前端框架
捂月1 小时前
Spring Boot 深度解析:快速构建高效、现代化的 Web 应用程序
前端·spring boot·后端
深度混淆2 小时前
实用功能,觊觎(Edge)浏览器的内置截(长)图功能
前端·edge
Smartdaili China2 小时前
如何在 Microsoft Edge 中设置代理: 快速而简单的方法
前端·爬虫·安全·microsoft·edge·社交·动态住宅代理
秦老师Q2 小时前
「Chromeg谷歌浏览器/Edge浏览器」篡改猴Tempermongkey插件的安装与使用
前端·chrome·edge
滴水可藏海2 小时前
Chrome离线安装包下载
前端·chrome