使用serve部署react项目

简介

之前是使用nginx部署react项目,但是因为前端姓名是需要单页渲染的,所以需要配置tryfile等一些东西,所以之后只要有新项目nginx就要重新配置nginx,个人认为这个是十分不好的事情,毕竟是生产环境,nginx能不动就不动,不然一出问题,全部前端文件都不能访问,后来看到了serve,原谅我之前不懂react的套路

安装serve

我们先使用最传统方法走一遍流程,之后我们使用docker去处理下面这些东西

首先安装serve,在这个之前你需要安装nodejs的基础环境,管理nodejs我推荐使用nvm

不知道怎么使用nvm你可以看下面这个文章

使用nvm来管理nodejs的版本

安装serve

npm install serve -g --registry=https://registry.npm.taobao.org

之后就是找一个前端的项目启动

serve -s project

接着你会看到下面提示

1
2
3
4
5
6
7
8
┌─────────────────────────────────────────────────┐
│ │
│ Serving! │
│ │
│ - Local: http://localhost:5000 │
│ - On Your Network: http://10.10.10.38:5000 │
│ │
└─────────────────────────────────────────────────┘

这就说明你已经启动成功了,并且可以访问这个项目了

总体的流程就是上面这个样子,下面我们使用docker解决这件事情,让部署变得简单

编写dockerfile

这里我使用的基础镜像是node:13.10.1-stretch

内容如下

1
2
3
4
FROM node:13.10.1-stretch
RUN npm install serve -g --registry=https://registry.npm.taobao.org && mkdir /project
VOLUME ["/project"]
CMD serve -s project

没有什么特殊的操作,就是安装了serve设置了一个volume,然后启动serve

之后build成为镜像

docker build . -t serve:1

编写compose文件

之后就是启动了,我的做法也很简单,compose文件如下

1
2
3
4
5
6
7
8
9
10
11
version: "3"
services:
serve:
image: "serve:1"
container_name: "serve"
restart: "always"
volumes:
- "./project:/project"
- "/etc/localtime:/etc/localtime"
ports:
- "502:5000"

之后所有的静态文件放在./project下面就可以了

欢迎关注Bboysoul的博客www.bboy.app

Have Fun

欢迎关注我的其它发布渠道