Docker 5 -- 用Docker部署一个React项目（1）

创建一个React app

npx create-react-app frontend

即可创建一个名为frontend的react项目。创建完成后会有提示，我的是yarn start, yarn test, yarn build等。如果你的电脑上没装yarn，可能会是npm start吧。总之按照提示即可对项目进行测试，编译，或者运行一个开发环境。

创建一个Dockerfile.dev文件

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 ./ ./
 
CMD ["npm", "start"]

• 删除node_modules文件夹，避免在copy时重复

这次因为我们把文件加了个.dev扩展名，因此，在运行docker build命令时，需要指定一个Dockerfile。

docker build -f Dockerfile.dev . 

完成后我们可以得到一个image_id。然后运行

docker run -it -p 3000:3000 IMAGE_ID

即可启动程序。然后打开浏览器，localhost:3000即可打开React的默认页面。

Volume映射

此时，我们如果修改了App.js中的代码，是不会体现在Container中的，因为Container与本地文件系统中完全分离的。但只要让它们共享一个储存空间，那么，一边代码做出了任何改变，另一边也能同时改变。

docker run -it -p 3000:3000 -v /home/node/app/node_modules -v $(pwd):/home/node/app jerry4013/frontend

如果-v后面只有一个路径，没有冒号，它的意思就是不要映射这个文件夹。

使用Docker Compose

上面的命令很长，我们可以用docker-compose来简化命令。首先新建一个文件docker-compose.yml

version: '3'
services: 
  web: 
    build: 
      context: .
      dockerfile: Dockerfile.dev
    ports: 
      - "3000:3000"
    volumes:
      - /home/node/app/node_modules
      - .:/home/node/app

最后执行docker-compose up即可启动程序。效果跟刚才应该是一样的。