欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

docker如何打包前端并運(yùn)行完整步驟詳解

 更新時間：2025年01月10日 09:14:23   作者：Jack_Kuo  
這篇文章主要介紹了使用Vue3和Vite1開發(fā)前端項(xiàng)目的過程,包括項(xiàng)目啟動、開發(fā)服務(wù)器運(yùn)行、構(gòu)建生產(chǎn)環(huán)境以及使用Docker部署,文中通過代碼介紹的非常詳細(xì),需要的朋友可以參考下

前端使用 Vue 3 + Vite

1.use npm run preview 運(yùn)行

0.項(xiàng)目根目錄下新建.env文件

VITE_BASE_API_prod=http://127.0.0.1:5000/api # 線上環(huán)境
VITE_MOCK_API_prod=api                       # 本地模擬數(shù)據(jù)                       
VITE_BASE_API_dev=http://127.0.0.1:5000/api  # 開發(fā)環(huán)境
VITE_MOCK_API_dev=api                        # 本地模擬數(shù)據(jù)

1. 確保安裝依賴

在項(xiàng)目的根目錄下，確保你已經(jīng)安裝了所有的依賴包。運(yùn)行以下命令來安裝：

node -v

v20.18.0

npm install

2. 運(yùn)行開發(fā)服務(wù)器

運(yùn)行以下命令啟動開發(fā)服務(wù)器：

npm run dev

這將執(zhí)行 package.json 文件中定義的 dev 腳本。通常情況下，這會啟動一個本地的開發(fā)服務(wù)器（如 Webpack Dev Server、Vite、Next.js 等），并監(jiān)聽你項(xiàng)目中的源代碼文件。一旦你做出修改，開發(fā)服務(wù)器通常會自動重新加載頁面。

3. 訪問開發(fā)環(huán)境

開發(fā)服務(wù)器通常會啟動在本地某個端口上（常見的是 localhost:5173 ），你可以在瀏覽器中輸入相應(yīng)地址訪問你的應(yīng)用。

  • 如果開發(fā)服務(wù)器運(yùn)行在 localhost:5173，那么你可以在瀏覽器地址欄輸入： 
    http://localhost:5173

具體的端口號可以在命令行中看到，或者在 package.json 中查看 dev 腳本的配置。

4. 構(gòu)建生產(chǎn)環(huán)境

npm run dev
npm run build
npm run preview

到此為止，就會在當(dāng)前目錄下闡述靜態(tài)資源dist文件夾。

2.docker 運(yùn)行

將前端資源編譯打包并交付給平臺基建組，主要涉及以下步驟：

1. 編譯和打包前端資源

  • 構(gòu)建項(xiàng)目：
    使用 npm run build 命令生成靜態(tài)資源：

    npm run build

    這會在項(xiàng)目根目錄下生成一個 dist 文件夾，包含所有的靜態(tài)文件。

  • 檢查打包結(jié)果：
    確保 dist 文件夾中的內(nèi)容是完整的，包括 index.html 和相關(guān)的 CSS、JS 文件。

2. 配置 Nginx

2.1 創(chuàng)建 Nginx 配置文件

為前端項(xiàng)目配置 Nginx。新建一個 Nginx 配置文件，例如 my-vue-app.conf，內(nèi)容如下：

server {
    listen 80;
    server_name your.domain.com; # 替換為實(shí)際的域名或 IP 地址

    root /usr/share/nginx/html; # 指定靜態(tài)資源的路徑
    index index.html;

    location / {
        try_files $uri /index.html;
    }

    error_page 404 /index.html;

    # 可選：配置 gzip 壓縮
    gzip on;
    gzip_types text/plain application/javascript text/css application/json;
}

2.2 確保目錄一致

在配置文件中，root 指定的路徑是 Nginx 用來加載前端資源的目錄。比如 /usr/share/nginx/html。

3. 將前端資源放入 Nginx 鏡像

  • 創(chuàng)建 Dockerfile在項(xiàng)目目錄下新建一個 Dockerfile 文件：

    FROM nginx:latest

# 刪除默認(rèn)的 Nginx HTML 文件
RUN rm -rf /usr/share/nginx/html/*

# 將本地的前端打包文件復(fù)制到 Nginx 鏡像中
COPY dist /usr/share/nginx/html

# 復(fù)制自定義 Nginx 配置文件
COPY AMP_SEMiner_portal_frontend.conf /etc/nginx/conf.d/default.conf

  • 構(gòu)建鏡像使用 Docker 構(gòu)建 Nginx 鏡像：

    docker build -t amp_seminer_portal_frontend-nginx .

  • 驗(yàn)證鏡像運(yùn)行生成的 Docker 鏡像以驗(yàn)證配置是否正確：

    docker run -p 8080:80 amp_seminer_portal_frontend-nginx

    在瀏覽器中訪問 http://localhost:8080，檢查是否能夠正確加載前端頁面。

4. 將鏡像交付給平臺基建組

  • 標(biāo)記鏡像給鏡像打標(biāo)簽，指向公司或團(tuán)隊(duì)的 Docker Registry：

    docker tag amp_seminer_portal_frontend-nginx jackkuo666/amp_seminer_portal_frontend-nginx:v1

  • 推送鏡像將鏡像推送到指定的 Docker Registry：

    docker push jackkuo666/amp_seminer_portal_frontend-nginx:v1

  • 通知基建組向平臺基建組提供以下信息：

  • 鏡像名稱和版本（例如：jackkuo666/amp_seminer_portal_frontend-nginx:v1）。
  • 配置中使用的端口（默認(rèn) 80）。
  • 依賴的環(huán)境變量或運(yùn)行時配置（如果有）。

5. 平臺基建組的操作建議

基建組拉取鏡像后，可以使用以下命令部署鏡像：

docker pull jackkuo666/amp_seminer_portal_frontend-nginx:v1
docker run -d -p 80:80 --name amp_seminer_portal_frontend-nginx jackkuo666/amp_seminer_portal_frontend-nginx:v1

如果在 Kubernetes 環(huán)境下運(yùn)行，建議基建組編寫一個 Deployment 和 Service 配置文件，以便進(jìn)行集群內(nèi)的部署。

6. 總結(jié)

  • 前端開發(fā)者：負(fù)責(zé)編譯、配置 Nginx、構(gòu)建 Docker 鏡像并推送到 Registry。
  • 基建組：拉取鏡像并部署到目標(biāo)環(huán)境。

通過這種方式，前端項(xiàng)目可以高效地交付和運(yùn)行在生產(chǎn)環(huán)境中。

到此這篇關(guān)于docker如何打包前端并運(yùn)行文章就介紹到這了,更多相關(guān)docker打包前端并運(yùn)行內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

相關(guān)文章

最新評論