Docker部署Vue項(xiàng)目的項(xiàng)目實(shí)踐
由于本人對(duì)前端項(xiàng)目的部署不熟,所以萌生了使用Docker部署Vue項(xiàng)目的想法。經(jīng)過一番搜索借鑒,終于成功的把vue項(xiàng)目打包成Docker鏡像并構(gòu)建成容器運(yùn)行起來的。其中幾多辛苦特來記錄一下。
編寫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)行修改
結(jié)語(yǔ)
不得不說使用Docker部署項(xiàng)目還是挺方便的哈哈。
到此這篇關(guān)于Docker部署Vue項(xiàng)目的項(xiàng)目實(shí)踐的文章就介紹到這了,更多相關(guān)Docker部署Vue內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
相關(guān)文章
使用Docker容器運(yùn)行Mysql實(shí)戰(zhàn)記錄
這篇文章主要給大家介紹了關(guān)于使用Docker容器運(yùn)行Mysql的相關(guān)資料,助大家更好的理解和學(xué)習(xí)使用docker,感興趣的朋友可以了解下,需要的朋友可以參考下2023-09-09使用 Docker 企業(yè)版搭建自己的私有注冊(cè)服務(wù)器
這篇文章主要介紹了使用 Docker 企業(yè)版搭建自己的私有注冊(cè)服務(wù)器的相關(guān)資料,需要的朋友可以參考下2018-11-11docker部署springBoot項(xiàng)目實(shí)操(docker是什么)
Docker可以讓開發(fā)者打包他們的應(yīng)用以及依賴包到一個(gè)輕量級(jí)、可移植的容器中,然后發(fā)布到任何流行的 Linux 機(jī)器上,也可以實(shí)現(xiàn)虛擬化,這篇文章主要介紹了docker部署springBoot項(xiàng)目實(shí)操,需要的朋友可以參考下2025-03-03淺談Docker-compose中的depends_on順序的問題解決
本文主要介紹了淺談Docker-compose中的depends_on順序的問題解決,文中通過示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2021-11-11