Jerry's Blog

Recording what I learned everyday

View on GitHub


4 May 2021

Docker 6 -- 用Docker部署一个React项目(2)

by Jerry Zhang

在容器内运行测试

docker run -it jerry4013/frontend npm run test

但是这种方法无法实时反映代码的变化。

解决方法一

可以先运行docker-compose up,然后再打开一个命令行窗口,输入docker ps查看运行中的容器的id,然后执行命令:

docker exec -it 0ca72ae8ddf6 npm run test

这样就可以根据容器中代码的改变,重新运行测试了。

解决方法二

用两个service

version: '3'
services: 
  web: 
    build: 
      context: .
      dockerfile: Dockerfile.dev
    ports: 
      - "3000:3000"
    volumes:
      - /home/node/app/node_modules
      - .:/home/node/app
  tests: 
    build: 
      context: .
      dockerfile: Dockerfile.dev
    volumes:
      - /home/node/app/node_modules
      - .:/home/node/app
    command: ["npm", "run", "test"]

此时启动docker-compose,注意,需要重新build

docker-compose up --build

这种方法的缺点是不能交互。

Nginx 部署

开发阶段,我们之所以能用localhost:3000打开,是因为React有一个开发时的服务器。但在production环境中,没有了开发服务器,我们怎么办呢?我们需要使用Nginx(或者其他服务器)来部署。

但是我们之前需要用一个Node容器,这里又需要一个Nginx容器。因此,我们需要分为两步来写Dockerfile。每遇到一个FROM关键字,就是一个新的phase。

首先我们新建一个Dockerfile

FROM node:alpine

USER node

RUN mkdir -p /home/node/app

WORKDIR /home/node/app

COPY --chown=node:node package.json .
RUN npm install
COPY --chown=node:node . .
RUN npm run build
 
FROM nginx
COPY --from=0 /home/node/app/build /usr/share/nginx/html

然后运行docker build .即可完成image的构建。

然后再运行docker run -p 8080:80 <image id>

tags: Docker