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>