利用docker 映象部署前端vue工程

2021-10-12 03:27:26 字數 1070 閱讀 9667

首先在部署環境前,我們需要檢視下專案**的api.js裡面請求的後端位址,先進行更改,比如你準備在伺服器ip為:11.22.33.44上部署環境,那麼你的請求位址要先改好,然後再開始部署操作

我們將專案**上傳到伺服器上比如專案**目錄名叫:test

安裝完成後我們就進入到專案根目錄test下開始構建專案

npm install -g @vue/cli       #安裝腳手架

npm install #安裝依賴

npm run build #構建打包

打包完成後我們會在專案根目錄test下生成乙個dist資料夾

到此我們就將專案已經打包好,接下來開始部署準備

docker pull nginx
建立 nginx config配置檔案

vi nginx config
內容如下

server 

error_page 500 502 503 504 /50x.html;

location = /50x.html

}

接下來開始編寫dockerfile

在專案根目錄下建立dockerfile檔案

vi dockerfile
寫入下面內容

from nginx

run rm /etc/nginx/conf.d/default.conf

add default.conf /etc/nginx/conf.d/

copy dist/ /usr/share/nginx/html/

然後在專案根目錄下構建映象

docker build -t  dateweb .           #注意後面有個點
構建完成後啟動容器

docker run -d -p 8080:80 dateweb
然後我們就可以在瀏覽器上訪問

Docker映象倉庫Harbor部署

元件 功能harbor adminserver 配置管理中心 harbor db mysql資料庫 harbor jobservice 負責映象複製 harbor log 記錄操作日誌 harbor ui web管理頁面和api nginx redis 會話registry 映象儲存 二 harbo...

docker部署前端專案

1.安裝docker nginx 檢視docker是否安裝 docker info docker 安裝nginx docker pull nginx 2.新建docker niginx配置檔案 新建docker web資料夾,新建dockerfile檔案,新建nginx資料夾,新建default.c...

Docker 通過Nginx映象部署Vue專案

編寫dockerfile 部署執行 為了演示我這邊新建乙個專案 cnpm install 等待安裝 cnpm run build build打包發布檔案 可以看到這裡dist資料夾中已經包含我們要發布的東西了 我這裡使用hub163中的映象 docker pull hub.c.163.com lib...