Docker容器部署前端Vue服務(小白教程)
更新時間：2022年03月16日 14:42:00 作者：春夏丶秋冬
本文主要介紹了Docker容器部署前端Vue服務，文中根據實例編碼詳細介紹的十分詳盡，具有一定的參考價值，感興趣的小伙伴們可以參考一下
需要工具
- Xftp
- Xshell
首先對前端項目進行打包：npm run build
打包完成
在項目中生成dist文件：
通過Xshell在/home目錄下創(chuàng)建項目文件夾
mkdir xxxx（文件名）
通過Xftp將打包的dist文件上傳到服務器的項目文件夾下；
利用Xshell在拉起nginx鏡像
docker pull nginx
在項目文件夾下編寫nginx config配置文件
vim default.conf
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文件和相關的靜態(tài)資源放到/usr/share/nginx/html目錄下。
在項目文件夾下編寫Dockerfile文件
vim Dockerfile
Dockerfile內容如下：
FROM nginx MAINTAINER zouzou RUN rm /etc/nginx/conf.d/default.conf ADD default.conf /etc/nginx/conf.d/ COPY dist/ /usr/share/nginx/html/
Dockerfile內容解釋
FROM nginx：該鏡像是基于nginx:latest鏡像構建的 MAINTAINER zouzou：添加說明 RUN rm /etc/nginx/conf.d/default.conf：刪除目錄下的default.conf文件 ADD default.conf /etc/nginx/conf.d/：將default.conf復制到/etc/nginx/conf.d/下，用本地的default.conf配置來替換nginx鏡像里的默認配置 COPY dist/ /usr/share/nginx/html/：將項目根目錄下dist文件夾（構建之后才會生成）下的所有文件復制到鏡像/usr/share/nginx/html/目錄下
如下三個文件保持在同一目錄 
構建docker鏡像
docker build -t xxxx .
注意不要少了最后的“.”(點) -t是給鏡像命名，.(點)是基于當前目錄的Dockerfile來構建鏡像
查看剛剛構建的鏡像
docker images | grep xxxx
啟動docker容器
docker run -d -p 9090:80 --name test xxxx
解釋：
- docker run：基于鏡像啟動一個容器
- -d：后臺方式啟動
- -p 9090:80: 端口映射，將宿主機的9090端口映射到容器的80端口
- --name：容器名，我起的叫test
- xxxx：要啟動的鏡像名稱
查看啟動的容器
docker ps
訪問
現在我們已經啟動了，訪問宿主機的地址:9090就可以看到我們部署的網站了
到此這篇關于Docker容器部署前端Vue服務(小白教程)的文章就介紹到這了,更多相關Docker容器部署Vue內容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！
相關文章
詳解使用export/import導出和導入docker容器
本篇文章主要介紹了詳解使用export/import導出和導入docker容器，小編覺得挺不錯的，現在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-07-07
本文主要介紹了查詢Docker鏡像DockerFile的方法步驟,文中通過示例代碼介紹的非常詳細,對大家的學習或者工作具有一定的參考學習價值,需要的朋友們下面隨著小編來一起學習學習吧2023-08-08
這篇文章主要介紹了docker安裝redis5.0.3的方法步驟，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2019-12-12
Docker忽略文件是指在Docker鏡像構建過程中,用于忽略指定文件或目錄的一種機制,本文主要介紹了Docker中忽略文件的實現,具有一定的參考價值,感興趣的可以了解一下2023-10-10
這篇文章主要介紹了解決Mac下 docker 無法 ping 通宿主機的問題，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-11-11
這篇文章主要介紹了Docker使用GPU全過程,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-01-01
本文介紹了如何實現Docker目錄和本地目錄互通,通過這種方式,可以輕松地在Docker容器和本地文件系統(tǒng)之間共享數據,感興趣的可以了解一下2023-08-08
Docker+K8S 集群環(huán)境搭建及分布式應用部署
這篇文章主要介紹了Docker+K8S 集群環(huán)境搭建及分布式應用部署，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2020-07-07
這篇文章主要介紹了詳解復制備份docker容器數據的方法，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2020-03-03
這篇文章主要介紹了docker-compose.yml參數的用法(配置文件),具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2023-11-11