Bboysoul's Blog

首页 公告 RSS

使用serve部署react项目

March 18, 2020 本文有 746 个字 需要花费 2 分钟阅读

简介

之前是使用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

接着你会看到下面提示

   ┌─────────────────────────────────────────────────┐
   │                                                 │
   │   Serving!                                      │
   │                                                 │
   │   - Local:            http://localhost:5000     │
   │   - On Your Network:  http://10.10.10.38:5000   │
   │                                                 │
   └─────────────────────────────────────────────────┘

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

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

编写dockerfile

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

内容如下

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文件如下

version: "3"
services:
  serve:
    image: "serve:1"
    container_name: "serve"
    restart: "always"
    volumes:
      - "./project:/project"
      - "/etc/localtime:/etc/localtime"
    ports:
      - "502:5000"

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

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

Have Fun


Tags:

本站总访问量 本站总访客数