前端項(xiàng)目容器化(Docker)打包部署
新建vue項(xiàng)目
- 使用vue官方腳手架創(chuàng)建一個(gè)項(xiàng)目
- 安裝依賴并運(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
手動(dòng)打包部署(舊方式)
- 單機(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命令打包
- 將鏡像上傳到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
