快捷導(dǎo)航

Docker部署Vue項(xiàng)目的項(xiàng)目實(shí)踐

更新時(shí)間：2023年07月23日 12:17:23 作者：不可食用鹽

本文主要介紹了Docker部署Vue項(xiàng)目的項(xiàng)目實(shí)踐，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧

編寫nginx配置

由于在項(xiàng)目打包之后需要使用nginx進(jìn)行部署，所以需要編寫一個(gè)nginx配置文件。

在項(xiàng)目跟目錄下創(chuàng)建nginx文件夾，并在該文件夾下創(chuàng)建default.conf文件，default.conf中的內(nèi)容如下：

server {
? ? listen 80;
? ? listen [::]:80;
? ? server_name localhost;
? ? location / {
? ? ? ? root /web;
? ? ? ? index index.html;
? ? ? ? try_files $uri $uri/ /index.html;
? ? ? ? add_header Cache-Control no-store;
? ? }
? ? error_page 500 502 503 504 /50x.html;
? ? location = /50x.html {
? ? ? ? root /usr/share/nginx/html;
? ? }
}

編寫Dockerfile

編寫Dockerfile以便構(gòu)建該項(xiàng)目的鏡像。在Dockerfile中使用分層構(gòu)建的方式，第一層用來打包構(gòu)建項(xiàng)目，第二層基于第一層打包的項(xiàng)目文件構(gòu)建最終鏡像。

FROM node:18.16.1 as builder
WORKDIR /web
COPY . .
RUN npm install --registry=https://registry.npm.taobao.org --no-package-lock --no-save
RUN npm run build
FROM nginx:alpine
RUN cp /usr/share/zoneinfo/Asia/Shanghai /etc/localtime \
? ? && echo "Asia/Shanghai" > /etc/timezone
WORKDIR /web
# 替換nginx配置文件
COPY ?--from=builder /web/nginx/default.conf /etc/nginx/conf.d/default.conf
COPY ?--from=builder /web/dist /web
EXPOSE 80

基于分層構(gòu)建的功能有一個(gè)保護(hù)敏感配置文件的思路, 即構(gòu)建一個(gè)基礎(chǔ)鏡像，將一些重要的配置文件放到基礎(chǔ)鏡像中，在構(gòu)建容器的時(shí)候再將這些配置文件復(fù)制到容器,這樣可以一定程度的保護(hù)配置文件中敏感信息的安全

使用shell腳本完成鏡像的構(gòu)建和部署

使用shell腳本完成鏡像的構(gòu)建和部署。步驟分為以下四步：

找到該項(xiàng)目對(duì)應(yīng)的正在運(yùn)行的容器，將之停止并刪除
刪除該項(xiàng)目之前版本的Docker鏡像
根據(jù)當(dāng)前代碼構(gòu)建鏡像
根據(jù)剛才構(gòu)建的新鏡像構(gòu)建并啟動(dòng)容器

#!/bin/sh ?
# 鏡像名稱
IMAGE_NAME=image-name
# 項(xiàng)目名稱也是容器名稱
PROJECT_NAME=ProjectName
# 宿主機(jī)端口號(hào)
PORT=8080
# 找到正在運(yùn)行的容器停止刪除
CONTAINER_NAME=$(docker ps -aq --filter name=^/$PROJECT_NAME$) ?
if [[ -n "$CONTAINER_NAME" ]]; then ?
docker rm -f $CONTAINER_NAME; ?
echo "$PROJECT_NAME 停止并刪除成功....." ?
fi ?
sleep 3s
# 找到并刪除之前的鏡像
ARG2=$(docker images -q --filter reference=$IMAGE_NAME) ??
if [ -n "$ARG2" ]; then ?
docker rmi -f $ARG2 ?
echo "$IMAGE_NAME鏡像刪除成功......" ?
fi ?
echo "構(gòu)建新鏡像" ??
docker build -t $IMAGE_NAME . ?
echo "鏡像構(gòu)建成功, 開始構(gòu)建容器并啟動(dòng)" ??
docker run -d --name $PROJECT_NAME -p $PORT:80 $IMAGE_NAME
echo "容器啟動(dòng)成功"

IMAGE_NAME、PROJECT_NAME、PORT這三個(gè)變量根據(jù)自己的項(xiàng)目進(jìn)行修改