【Day9】前端React +Antd 的环境(Docker化)建立 (下)

使用命令行设定初始化。

这边是本地的方式。

git clone https://github.com/ant-design/ant-design-pro.git --depth=1
cd ant-design-pro
npm install
npm start

使用docker run预览的模式

docker pull antdesign/ant-design-pro
docker run -p 80:80 antdesign/ant-design-pro

比较进阶的基本参考Ant Design Pro 的 Docker 部署方式

这边的dockerfile有放进 ant-design-pro的github里面

分别有开发的环境跟实际部属的环境

开发的dockerfile 如下:
原网址

FROM node:latest

WORKDIR /usr/src/app/

COPY package.json ./
RUN npm install --silent --no-cache --registry=https://registry.npm.taobao.org

COPY ./ ./

RUN npm run fetch:blocks

CMD ["npm", "run", "start"]

部属的环境如下:
原网址

分成两个阶段，第一个阶段生成相关的文件与程序，第二个阶段把 build好的copy到nginx上面

ROM circleci/node:latest-browsers as builder

WORKDIR /usr/src/app/
USER root
COPY package.json ./
RUN yarn

COPY ./ ./

RUN npm run test:all

RUN npm run build


FROM nginx

WORKDIR /usr/share/nginx/html/

COPY ./docker/nginx.conf /etc/nginx/conf.d/default.conf

COPY --from=builder /usr/src/app/dist  /usr/share/nginx/html/

EXPOSE 80

CMD ["nginx", "-g", "daemon off;"]

假如有人试过不能work的话，可以在下面留言，我或许能帮上一点忙