docker如何部署前端项目

docker入门之部署前端项目,以create-react-app为例。

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

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

执行ls查看一下并cd进入该项目.

2. 在项目根目录下创建Dockerfile文件,并编写以下内容

vi Dockerfile  // 创建文件

编写内容:

# node版本号
FROM node:15-alpine
# 工作目录
WORKDIR /create-react-app
# 添加所有文件到create-react-app目录
ADD . /create-react-app
# 执行命令
RUN npm install && npm run build && npm install -g http-server
# 暴露端口号
EXPOSE 3000
# 容器启动之后, 执行http-server 注:./build是指打包后的文件
CMD http-server ./build -p 3000

3. 创建image文件

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

执行成功后, 查看一下image文件:

执行成功后, 查看一下image文件

4. 从image文件生成容器

// 将Dockerfile中暴露出来的3000端口映射到本机的1234端口
docker container run -p 1234:3000 create-react-app-demo 

然后在本地执行http://localhost:1234/, 成功。

从image文件生成容器

是不是小有成就感? 那你就错了,正常工作里不会这么用哈哈哈哈。

看看运行的create-react-app的镜像多大:docker images

create-react-app的镜像

吓人!一个g…一般的前端项目打包过后的代码也就几十兆,然后你一个docker就要一个G?加载起来时间也很漫长…运维哭晕在厕所,还是看看怎么优化一下吧

利用镜像缓存

1. package.json算是相对稳定的吧,在没有新的安装包需要下载的时候,这个文件是无需重新构建的吧?!好像有点道理,盘他!

vim Dockerfile重新修改一下配置信息:

# node版本号
FROM node:15-alpine
# 工作目录
WORKDIR /create-react-app
# 添加所有文件到create-react-app目录
ADD package.json package-lock.json /create-react-app
ADD . /create-react-app
# 执行命令
RUN npm install && npm run build && npm install -g http-server
# 暴露端口号
EXPOSE 3000
# 容器启动之后, 执行http-server 注:./public是指打包后的文件
CMD http-server ./build -p 3000

每次修改完配置文件之后都需要重新构建镜像:

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

利用镜像缓存

接下来利用ci代替npm install.ci会比npm install的执行速度快,而且当package.json跟package-lock.json不匹配时,ci会报异常

# node版本号
FROM node:15-alpine
# 工作目录
WORKDIR /create-react-app
# 添加所有文件到create-react-app目录
ADD package.json package-lock.json /create-react-app
ADD . /create-react-app
# 执行命令
RUN npm ci
RUN npm run build && npm install -g http-server
# 暴露端口号
EXPOSE 3000
# 容器启动之后, 执行http-server 注:./public是指打包后的文件
CMD http-server ./build -p 3000

再重新构建一次镜像。

重新构建一次镜像

构建时间是优化了那么一点,接下来看看1G的体积吧 吓人!

体积那么大,基本都归功于我们npm install的时候生成的node_module了吧。那把node_module搞掉,应该会小很多,试一波呗。

我们只需要静态生成的静态资源,那就只提取编译后的文件,而且部署项目推荐用ngnix,所以这里也需要把http-server的镜像干掉 ,改成用ngnix的。

那 再改改dockerfile配置文件。vim dockerfile

FROM node:15-alpine as builder

WORKDIR /create-react-app
ADD . /create-react-app
ADD package.json package-lock.json  /create-react-app
RUN npm ci
RUN  npm run build

FROM nginx:alpine
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

docker run -it --rm nginx:alpine sh

成功之后我们再重新构建一下image

docker image build -t create-react-app-demo

然后再执行docker images,哈哈小成就感又来了~

执行docker images

总结

  • 镜像中使用基于alpine的镜像,减小镜像体积;
  • 镜像中需要锁定node的版本号,尽可能也锁定alpine的版本号,如node:15-alpine
  • npm ci替代npm i,避免版本问题及提高依赖安装速度;
  • package.json单独添加,充分利用镜像缓存;
  • 只提取编译文件(多阶段构建),减小镜像体积。

「点点赞赏,手留余香」

3

给作者打赏,鼓励TA抓紧创作!

微信微信 支付宝支付宝

还没有人赞赏,快来当第一个赞赏的人吧!

声明:本站所有资源及文章均来源于网络及用户分享或为本站原创,仅限用于学习和研究,任何个人或组织,在未征得本站同意时,禁止复制、盗用、采集、发布本站内容到任何网站、书籍等各类媒体平台。如若本站内容侵犯了原著者的合法权益,可联系我们进行处理。
码云笔记 » docker如何部署前端项目

2 评论

  1. 学习了,大佬,正好最近项目中要用到,参考一下

发表评论

IT互联网行业相关广告投放 更专业 更精准

立即查看 联系我们