Docker鏡像+nginx 部署 vue 項目的方法
一、打包vue項目
在開發(fā)完的vue項目輸入如下命名，打包生成dist文件夾
yarn build / npm run build
此時根目錄會多出一個文件夾：dist文件夾，里面就是我們要發(fā)布的東西。
如果將該dist目錄整個傳到服務器上，部署成靜態(tài)資源站點就能直接訪問到該項目。
二、獲取nginx 鏡像
nginx 是一個高性能的HTTP和反向代理服務器，此處我們選用 nginx 鏡像作為基礎來構建我們的vue應用鏡像。
在終端輸入：
docker pull nginx
即可以獲取到nginx鏡像。
Docker鏡像是一個特殊的文件系統(tǒng)，除了提供容器運行時所需的程序、庫、資源、配置等文件外，還包含了一些為運行時準備的一些配置參數(shù)（如匿名卷、環(huán)境變量、用戶等）。 鏡像不包含任何動態(tài)數(shù)據(jù)，其內容在構建之后也不會被改變。
在終端輸入如下命令，可以看到nginx的鏡像
docker image ls
鏡像結果如下所示：
三、創(chuàng)建 nginx config配置文件
在項目根目錄下創(chuàng)建nginx文件夾，該文件夾下新建文件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;
try_files $uri $uri/ /index.html;
}
#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;
}
}
注意⚠️：如果vue-router使用的是history模式，try_files $uri $uri/ /index.html; 非常重要！?。?/p>
因為我們的應用是單頁客戶端應用，如果后臺沒有正確的配置，當用戶在瀏覽器訪問地址時，就會返回404。
所以需要在服務端增加一個覆蓋所有情況的候選資源，如果URL匹配不到任何靜態(tài)資源，則應該返回同一個index.html頁面，這個頁面就是你app依賴的頁面。
上面的文件定義了首頁的指向為 /usr/share/nginx/html/index.html, 所以我們可以一會把構建出來的index.html文件和相關的靜態(tài)資源放到/usr/share/nginx/html目錄下。
四、創(chuàng)建 Dockerfile 文件
# 設置基礎鏡像 FROM nginx # 定義作者 MAINTAINER lihui <1107136746@qq.com> # 將dist文件中的內容復制到 /usr/share/nginx/html/ 這個目錄下面 COPY dist/ /usr/share/nginx/html/ #用本地的 default.conf 配置來替換nginx鏡像里的默認配置 COPY nginx/default.conf /etc/nginx/conf.d/default.conf
五、基于該Dockerfile構建vue應用鏡像
運行如下命令，注意不要少了最后的“ . ”
docker build -t test .
-t 是給鏡像命名 ，test是生成鏡像的名字，. 是基于當前目錄的Dockerfile來構建鏡像。
基于vue的鏡像就生成好了！
以上就是Docker鏡像+nginx 部署 vue 項目的方法的詳細內容，更多關于docker部署vue項目的資料請關注腳本之家其它相關文章！
相關文章
使用Dockerfile實現(xiàn)容器內部服務隨容器自啟動的方法
這篇文章主要介紹了使用Dockerfile實現(xiàn)容器內部服務隨容器自啟動,本文給大家介紹的非常詳細，對大家的學習或工作具有一定的參考借鑒價值，需要的朋友可以參考下2022-06-06
本篇文章主要介紹了Docker基于已有的鏡像制新的鏡像，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-05-05
這篇文章主要介紹了使用docker部署django技術棧項目的方法步驟，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2019-09-09
docker-compose部署mysql數(shù)據(jù)庫完整步驟
Docker-Compose項目是Docker官方的開源項目,負責實現(xiàn)對Docker容器集群的快速編排,這篇文章主要給大家介紹了關于docker-compose部署mysql數(shù)據(jù)庫的完整步驟,需要的朋友可以參考下2024-05-05
這篇文章主要介紹了Docker Swarm從部署到基本操作，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2019-09-09
Docker是一種打包和運行應用程序的新方式. Docker Desktop是 Docker的Windows桌面版本,本文主要介紹了Docker Desktop安裝使用教程,感興趣的可以了解一下2024-02-02
淺析SpringBoot打包上傳到docker并實現(xiàn)多實例部署(IDEA版)
這篇文章主要介紹了SpringBoot打包上傳到docker并實現(xiàn)多實例部署(IDEA版)，本文通過圖文并茂實例詳解的形式給大家介紹的非常詳細，對大家的學習或工作具有一定的參考借鑒價值,需要的朋友可以參考下2020-04-04
該文章介紹了如何使用Docker私有倉庫刪除鏡像的步驟,包括獲取Token、請求鏡像列表和刪除鏡像的具體操作,同時,還解決了在刪除鏡像時遇到的MANIFEST_UNKNOWN錯誤,并提供了相應的解決辦法2025-02-02
這篇文章主要介紹了如何在Linux系統(tǒng)中安裝Docker，其實安裝docker真的很簡單，只需要幾條命令就可以完成了，本文給大家介紹的非常詳細,需要的朋友可以參考下2021-12-12
docker部署nginx下日志自動切割方法實現(xiàn)
部署Nginx在Docker中時,其日志文件默認不會自動切割,與非Docker環(huán)境有所不同,本文介紹了三種日志切割方法,文中通過示例代碼介紹的非常詳細,對大家的學習或者工作具有一定的參考學習價值,需要的朋友們下面隨著小編來一起學習學習吧2024-10-10