docker 部署 前端項目

前言：

最近在使用尤大今年剛發布的腳手架vite2.0搭建的項目練手，打算部署到服務器上玩一玩。（附上vite中文文檔，有興趣的可以去康康：https://cn.vitejs.dev/ ）

部署

1.克隆自己的項目到服務器上

git clone xxx // xxx是自己的項目倉庫地址

此時可以看到已經成功拉取了項目

2. 獲取nginx鏡像

docker pull nginx

3. 創建 nginx 配置文件

進入項目根目錄，在項目根目錄下創建文件default.conf，寫入如下內容

server {
    listen       80;
    server_name  localhost; # 修改為docker服務宿主機的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;
    }
}

該配置文件定義了首頁的指向為 /usr/share/nginx/html/index.html, 所以我們可以一會把構建出來的 index.html 文件和相關的靜態資源放到 /usr/share/nginx/html 目錄下。

4. 創建dockerfile文件

在項目根目錄下創建Dockerfile文件，寫入下面內容

# 該鏡像是基於nginx:latest鏡像構建的
FROM nginx

# 添加說明
MAINTAINER author: xxxx

# 刪除目錄下的default.conf文件
RUN rm /etc/nginx/conf.d/default.conf

# 將default.conf復制到/etc/nginx/conf.d/下，用本地的default.conf配置來替換nginx鏡像里的默認配置
ADD default.conf /etc/nginx/conf.d/

# 將項目根目錄下dist文件夾（構建之后才會生成）下的所有文件復制到鏡像/usr/share/nginx/html/目錄下
COPY dist/ /usr/share/nginx/html/

5. 打包生成dist文件

在安裝依賴和打包過程中，發現宿主機沒有安裝 node 和 yarn，於是參考了這篇文章：linux安裝nodejs和yarn，安裝完之后就可以執行下面步驟了。
安裝依賴

npm install // 或者 yarn 

構建

npm run build // 或者yarn build

6. 構建docker鏡像

docker build -t vite2 . 

注意不要少了最后的“.”(點)
-t是給鏡像命名，.(點)是基於當前目錄的Dockerfile來構建鏡像

構建完后可以用 docker images命令查看本地鏡像

7. 啟動docker容器

docker run -d -p 3000:80 --name vite-demo vite2

docker run：基於鏡像啟動一個容器

-d：后台方式啟動

-p 3000:80: 端口映射，將宿主機的3000端口映射到容器的80端口

--name vite-demo: 容器名

vite2：要啟動的鏡像名稱

啟動后可使用 docker ps 命令查看容器是否啟動成功

訪問

訪問宿主機IP:3000 就可以看到我們部署的項目了

簡化部署步驟（編寫腳本）

在根目錄下創建名為 start.sh 的腳本,填入以下代碼

#/bin/bash

# 拉取最新代碼
git pull

# 安裝依賴
yarn

# 構建打包
yarn build

# 停止、刪除容器
docker stop vite && docker rm vite

# 構建鏡像
docker build -t vite2 .

# 創建容器
docker run -d -p 3000:80 --name vite-demo vite2

這樣，每次更新代碼之后，只需要 輸入 sh start.sh 命令運行腳本，就能部署項目

參考文檔： https://www.cnblogs.com/zouzou-busy/p/11838524.html