docker入门之摆设前端项目，以create-react-app为例

浮世清欢

1.github上先下载create-react-app的源码

1. git clone https://github.com/facebook/create-react-app.git

复造代码

施行ls检察一下并cd 进进该项目.
2.正在项目根目次下创立Dockerfile文件,并编写以下内乱容

1. vi Dockerfile  // 创立文件
3. 编写内乱容：
5. # node版本号
6. FROM node:15-alpine
7. # 事情目次
8. WORKDIR /create-react-app
9. # 增加一切文件到create-react-app目次
10. ADD . /create-react-app
11. # 施行号令
12. RUN npm install && npm run build && npm install -g http-server
13. # 表露端标语
14. EXPOSE 3000
15. # 容器启动以后, 施行http-server 注：./build是指挨包后的文件
16. CMD http-server ./build -p 3000

复造代码

3.创立image文件

1. docker image build --progress plain -t create-react-app-demo .

复造代码

施行成功后, 检察一下image文件

4.从image文件天生容器：

1. // 将Dockerfile中表露出去的3000端心映照到本机的1234端心
2. docker container run -p 1234:3000 create-react-app-demo

复造代码

然后正在当地施行http://localhost:1234/， 成功～

是否是小有成绩感？ 那您便错了，一般事情里没有会那么用哈哈哈哈。
看看运转的create-react-app的镜像多年夜：docker images

吓人！一个g…普通的前端项目挨包事后的代码也便几十兆，然后您一个docker便要一个G？减载起去工夫也很冗长…运维哭晕正在茅厕，仍是看看怎样劣化一下吧
操纵镜像缓存
1.package.json算是相对不变的吧，正在出有新的装置包需求下载的时分，那个文件是无需从头构建的吧？！ 仿佛有面原理，盘他！
vim Dockerfile从头修正一下设置疑息

1. # node版本号
2. FROM node:15-alpine
3. # 事情目次
4. WORKDIR /create-react-app
5. # 增加一切文件到create-react-app目次
6. ADD package.json package-lock.json /create-react-app
7. ADD . /create-react-app
8. # 施行号令
9. RUN npm install && npm run build && npm install -g http-server
10. # 表露端标语
11. EXPOSE 3000
12. # 容器启动以后, 施行http-server 注：./public是指挨包后的文件
13. CMD http-server ./build -p 3000

复造代码

每次修正完设置文件以后皆需求从头构建镜像：

1. docker image build --progress plain -t create-react-app-demo .

复造代码

接下去操纵ci代替npm install.ci会比npm install的施行速度快，并且当package.json跟package-lock.json没有婚配时,ci会报非常

1. # node版本号
2. FROM node:15-alpine
3. # 事情目次
4. WORKDIR /create-react-app
5. # 增加一切文件到create-react-app目次
6. ADD package.json package-lock.json /create-react-app
7. ADD . /create-react-app
8. # 施行号令
9. RUN npm ci
10. RUN npm run build && npm install -g http-server
11. # 表露端标语
12. EXPOSE 3000
13. # 容器启动以后, 施行http-server 注：./public是指挨包后的文件
14. CMD http-server ./build -p 3000

复造代码

再从头构建一次镜像

嗯。。。构建工夫是劣化了那末一面，接下去看看1G的体积吧 吓人！！！！
体积那末年夜，底子皆回功于我们npm install的时分天生的node_module了吧。那把node_module弄失落，该当会小很多，试一波呗
我们只需求静态天生的静态资本，那便只提与编译后的文件,并且布置项目举荐用ngnix,以是那里也需求把http-server的镜像干失落 ，改成用ngnix的。
那 再改改dockerfile设置文件。vim dockerfile

1. FROM node:15-alpine as builder
3. WORKDIR /create-react-app
4. ADD . /create-react-app
5. ADD package.json package-lock.json  /create-react-app
6. RUN npm ci
7. RUN  npm run build
9. FROM nginx:alpine
10. COPY --from=builder /create-react-app/build /usr/share/ngnix/html

复造代码

ngnix/html是布置项目时需求增加编译文件的途径，那里需求先抓与一下ngnix的image：
docker pull nginx:alpine
推下去事后我们进进该容器看一下施行成功了出docker run -it --rm nginx:alpine sh

成功以后我们再从头构建一下image
docker image build -t create-react-app-demo .
然后再施行docker images ，哈哈哈哈小成绩感又去了～～～

总结：
镜像中利用基于 alpine 的镜像，加小镜像体积。
镜像中需求锁定 node 的版本号，尽量也锁定 alpine 的版本号，如 node:15-alpine。
npm ci 交换 npm i，制止版本标题问题及前进依靠装置速度
package.json 零丁增加，充实操纵镜像缓存
只提与编译文件（多阶段构建），加小镜像体积

免责声明：假如进犯了您的权益，请联络站少，我们会实时删除侵权内乱容，感谢协作！