用 docker 可以幫我們快速部署前端項(xiàng)目，本文介紹了如何用 docker 快速部署 vue3 項(xiàng)目。請準(zhǔn)備好一臺云服務(wù)器并安裝好 docker，然后開始閱讀本教程。
1 項(xiàng)目打包
執(zhí)行npm run build打包后項(xiàng)目目錄中會多出一個 dist 文件夾
2 制作 docker 鏡像
利用 docker 拉取 nginx 鏡像
docker pull nginx
在服務(wù)器中創(chuàng)建工作目錄，這里我放在 /home 目錄下
工作目錄中存放三個文件，分別是：
- 打包后的項(xiàng)目文件 dist
- nginx 的配置文件
default.conf，內(nèi)容如下
server {
listen 80;
server_name localhost; # 修改為docker服務(wù)宿主機(jī)的ip
location / {
root /usr/share/nginx/html;
index index.html index.htm;
try_files $uri $uri/ /index.html =404;
}
error_page 500 502 503 504 /50x.html;
location = /50x.html {
root html;
}
}
- 用來構(gòu)建 Docker 鏡像的 Dockerfile 文件，內(nèi)容如下
FROM nginx
MAINTAINER onesummer
RUN rm /etc/nginx/conf.d/default.conf
ADD default.conf /etc/nginx/conf.d/
COPY dist/ /usr/share/nginx/html/
Dockerfile 文件解釋
FROM nginx：該鏡像是基于nginx:latest鏡像構(gòu)建的
MAINTAINER onesummer：添加說明
RUN rm /etc/nginx/conf.d/default.conf：刪除目錄下的default.conf文件
ADD default.conf /etc/nginx/conf.d/：將default.conf復(fù)制到/etc/nginx/conf.d/下，用本地的default.conf配置來替換nginx鏡像里的默認(rèn)配置
COPY dist/ /usr/share/nginx/html/：將項(xiàng)目根目錄下dist文件夾（構(gòu)建之后才會生成）下的所有文件復(fù)制到鏡像/usr/share/nginx/html/目錄下
完成以上步驟之后，進(jìn)入工作目錄，通過 docker build 構(gòu)建鏡像
docker build -t [鏡像名稱] .
注意事項(xiàng)：-t 后輸入給鏡像取的名稱，最后的點(diǎn) （.） 不要忘記，代表給利用當(dāng)前 dockerfile 構(gòu)建鏡像
3 啟動 docker 容器
先查看我們構(gòu)建的鏡像 docker images
利用 docker run 命令啟動 docker 容器
docker run -d -p 88:80 --name [容器名] [鏡像名]
查看我們啟動的容器 docker ps
關(guān)閉正在運(yùn)行的容器
docker stop [容器名]
刪除容器
docker rm [容器名]
刪除所有已經(jīng)停止的容器
docker container prune
4 關(guān)閉、開啟服務(wù)器防火墻
瀏覽器訪問之前，我們需要在防火墻中放行端口
- 云服務(wù)器的防火墻放行，詳見你所用的服務(wù)器的文檔
- Linux 系統(tǒng)防火墻端口放行，以 Ubuntu 20 為例
- 查看放行端口狀態(tài)
sudo ufw status
- 端口放行
sudo ufw allow [端口號]
// 刪除規(guī)則
sudo ufw delete allow [端口號]/tcp
完成之后，就可以在瀏覽器中查看啦！文章來源：http://www.zghlxwxcb.cn/news/detail-751927.html
- 端口禁止/解除禁止
sudo ufw deny [端口號]
sudo ufw delete deny [端口號]
參考文獻(xiàn)
https://blog.csdn.net/xiaolong124/article/details/123458100?ops_request_misc=&request_id=&biz_id=102&utm_term=docker部署vue的前端項(xiàng)目&utm_medium=distribute.pc_search_result.none-task-blog-2~all~sobaiduweb~default-7-123458100.nonecase&spm=1018.2226.3001.4187文章來源地址http://www.zghlxwxcb.cn/news/detail-751927.html
到了這里，關(guān)于手把手教你用 Docker 部署 Vue3 項(xiàng)目的文章就介紹完了。如果您還想了解更多內(nèi)容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
