前端項(xiàng)目容器化Docker打包部署方式詳解

更新時(shí)間：2023年11月20日 09:25:57 作者：言午日堯耳總

這篇文章主要為大家介紹了前端項(xiàng)目容器化Docker打包部署方式詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪

前端項(xiàng)目容器化(Docker)打包部署

新建一個(gè)vue項(xiàng)目
增加容器配置
docker命令打包鏡像，部署本機(jī)

BiliBili視頻同步發(fā)布

新建vue項(xiàng)目

使用vue官方腳手架創(chuàng)建一個(gè)項(xiàng)目
- 下面的demo使用默認(rèn)配置

安裝依賴并運(yùn)行

# 使用vue腳手架創(chuàng)建項(xiàng)目
npm create vue@latest
# 進(jìn)入項(xiàng)目(假設(shè)項(xiàng)目名為"xxc-web")
cd xxc-web
# 安裝依賴
npm install
# 測試
npm run dev

手動打包部署(舊方式)

單機(jī)部署方式通常使用"npm run build"打包成靜態(tài)文件
- 通常打包后文件在項(xiàng)目根目錄的"dist"目錄下
將dist目錄的文件上傳服務(wù)器
配置nginx，將某域名/端口號指向該目錄

之后即可使用http://ip:port訪問

容器化(Docker)打包部署

打包配置

根目錄新增"nginx.conf"文件
- 為了解決部分框架部署后的路由問題
- 如:該開始訪問一切正常，但是使用瀏覽器刷新后，報(bào)錯(cuò)404

文件內(nèi)容如下：

server {
  listen       80;
  listen  [::]:80;
  server_name  localhost;
  access_log  /var/log/nginx/host.access.log  main;
  location / {
      root   /usr/share/nginx/html;
      index  index.html index.htm;
      # 新增下面這句，其他是默認(rèn)nginx配置
      # 解決部分前端框架的路由問題，在瀏覽器刷新報(bào)錯(cuò)404
      try_files $uri $uri/ /index.html;
  }
  error_page   500 502 503 504  /50x.html;
  location = /50x.html {
      root   /usr/share/nginx/html;
  }
}

根目錄新增"Dockerfile"文件
- 打包過程分為兩個(gè)階段
- 第一階段：使用node鏡像安裝依賴并打包成靜態(tài)文件
- 第二階段：將靜態(tài)文件放入nginx鏡像，并修改配置

文件內(nèi)容如下：

# 第一階段：node鏡像打包
FROM node:latest AS frontend-builder
WORKDIR /build-app
COPY . .
RUN npm install
RUN npm run build
# 第二階段：nginx打包
FROM nginx:latest
EXPOSE 80
WORKDIR /app
# 替換nginx配置
COPY nginx.conf /etc/nginx/conf.d/default.conf
# 將第一階段的靜態(tài)文件復(fù)制到nginx中
RUN rm -rf /usr/share/nginx/html
RUN mkdir /usr/share/nginx/html
COPY --from=frontend-builder /build-app/dist /usr/share/nginx/html
# 運(yùn)行
CMD ["nginx", "-g", "daemon off;"]

打包部署

使用docker命令打包
- 鏡像名稱為"xxc-web:v1"
將鏡像上傳到docker倉庫或私有倉庫(Harbor)

運(yùn)行容器

# 打包鏡像
docker build -t xxc-web:v1 . 
# 上傳倉庫
# docker login -u <用戶名> -p <密碼> <倉庫地址>
# docker push xxc-web:v1
# 運(yùn)行
docker run --name xxc-web -dp 1234:80 xxc-web:v1