快捷導(dǎo)航

Docker?部署?vue?項(xiàng)目的詳細(xì)流程

更新時(shí)間：2024年09月24日 08:53:12 作者：二月雪

使用Docker配合Nginx部署Vue3項(xiàng)目涉及多個(gè)步驟：首先安裝Nginx,然后創(chuàng)建掛載目錄及配置文件；接著打包Vue項(xiàng)目并上傳至服務(wù)器；最后創(chuàng)建Dockerfile,構(gòu)建鏡像并啟動(dòng)容器,部署完成后,通過IP訪問應(yīng)用以驗(yàn)證是否成功

概述

技術(shù)棧：docker + vue3 + nginx

部署流程

1、docker下載安裝 nginx

docker pull nginx

2、創(chuàng)建nginx掛載目錄 /usr/local/nginx （可根據(jù)自己需要存放文件的位置自行創(chuàng)建目錄）

mkdir -p /usr/local/nginx

3、創(chuàng)建default.conf：vim default.conf

server {
    listen       80;
    server_name  localhost;
    #charset koi8-r;
    access_log  /var/log/nginx/host.access.log  main;
    error_log  /var/log/nginx/error.log  error;
    location / {
        root   /usr/share/nginx/html;
        index  index.html index.htm;
    }
    #error_page  404              /404.html;
    # redirect server error pages to the static page /50x.html
    #
    error_page   500 502 503 504  /50x.html;
    location = /50x.html {
        root   /usr/share/nginx/html;
    }
}

該配置文件定義了首頁的指向?yàn)?/usr/share/nginx/html/index.html, 所以我們可以一會(huì)把構(gòu)建出來的index.html文件和相關(guān)的靜態(tài)資源放到/usr/share/nginx/html目錄下。

4、將本地的vue項(xiàng)目進(jìn)行打包，生成dist目錄

npm run build  # 執(zhí)行該指令后，在項(xiàng)目根目錄中生成dist文件夾

5、將dist文件夾壓縮并上傳到掛載目錄中：/usr/local/nginx/

6、進(jìn)入掛載目錄，并解壓出dist目錄，我們的index.html則在dist目錄下：

dist

7、在與dist同目錄下，創(chuàng)建Dockerfile文件，vim Dockerfile:

FROM nginx
COPY ./dist/ /usr/share/nginx/html/
COPY ./default.conf /etc/nginx/conf.d/default.conf

8、將Dockerfile構(gòu)建鏡像(注：最后有一個(gè).不能漏掉，這個(gè)構(gòu)建表示當(dāng)前目錄下的Dockerfile)

docker build -t nginx_vue3 .
# 查看鏡像：docker images

docker_images

9、啟動(dòng)并掛在nginx

docker run -d -p 80:80 --name nginx -v /usr/local/nginx/dist:/usr/share/nginx/html --restart=always nginx
-d # 后臺(tái)運(yùn)行容器
-p # 將宿主機(jī)的80端口映射到容器的80端口
--name # 指定容器的名稱
-v 掛載宿主機(jī)的目錄或文件 到 容器中的目錄或文件，實(shí)現(xiàn)文件數(shù)據(jù)同步
----restart=always  # 將容器設(shè)置為服務(wù)自啟動(dòng)（運(yùn)行docker服務(wù)時(shí)，容器也就會(huì)跟著啟動(dòng)）
# 最后的nginx_vue3為創(chuàng)建的鏡像名稱

10、查看容器: docker ps

docker_ps