與你相識

博主介紹：

– 本人是普通大學生一枚，每天鉆研計算機技能，CSDN主要分享一些技術內容，因我常常去尋找資料，不經常能找到合適的，精品的，全面的內容，導致我花費了大量的時間，所以會將摸索的內容全面細致記錄下來，另外，我更多關于管理，生活的思考會在簡書中發布，如果你想了解我對生活有哪些反思，探索，以及對管理或為人處世經驗的總結，我也歡迎你來找我，

– 目前的學習專注于Go語言，輔學演算法，前端領域，也會分享一些校內課程的學習，例如資料結構，計算機組成原理等等，如果你喜歡我的風格，請關注我，我們一起成長，

Introduction
因為是先寫的后端部署，又因為前端和后端的部署類似，也比較簡單，我們就加快速度了，我們的前端專案用的是vue專案，

想要了解部署更詳細的內容可以戳右方鏈接：后端部署具體詳解

主要是經歷以下幾個步驟

構建Dockerfile檔案
通過Dockerfile檔案構建鏡像
通過鏡像生成容器，掛載前端專案
打包前端專案
修改nginx組態檔

構建Dockerfile檔案
構建鏡像
根據鏡像創建容器
打包vue專案
修改nginx組態檔

構建Dockerfile檔案

前端的部署比較關鍵的一點就是nvm了，nvm可以對node版本進行管理，因為不同的前端專案可能會用不同版本的node，它們的兼容性可能是不一樣的，而nvm可以解決這個問題，它可以方便在同一臺設備上進行多個node版本之間的切換，

# 依賴centos環境
FROM centos:latest

#安裝vim、git和nvm環境
RUN yum -y update \
    && yum -y install vim \  # 安裝vim，可能會有在容器內修改檔案的需求
	&& yum -y install git \  # 在容器中安裝git
	&& git --version \  # 查看一下git版本
	&& cd ~/ \  # 打開到根目錄
	&& git clone https://github.com.cnpmjs.org/nvm-sh/nvm.git .nvm \  # 下載nvm
	&& cd ~/.nvm && git checkout v0.35.3 \  # 切換nvm版本
	&& echo "source ~/.nvm/nvm.sh" >> ~/.bashrc && source ~/.bashrc

構建鏡像

通過docker images可以查看我們創建的centos_git_nvm鏡像

docker build -f Dockerfile -t centos_git_nvm .

根據鏡像創建容器

掛載的是前端專案檔案

docker run -it --name centos_git_nvm_node -v /root/project:/project -d centos_git_nvm

打包vue專案

在專案目錄中，使用npm run build打包專案，會有一個dist檔案夾，復制到/root/project專案目錄即可

如果npm run build報錯的話，可能是有一些包沒有安裝上，導致命令出錯，可以嘗試使用npm install命令來安裝一下專案涉及的依賴，

修改nginx組態檔

可以參考后端部署的nginx容器搭建步驟，搭建一個nginx容器，稍有不同的是，創建容器的時候，需要多掛載一個前端專案目錄，我們把dist檔案放到/root/project下了，與nginx中的目錄對應一下，然后nginx就可以訪問到了，

docker run -it --name nginx --net host -v /root/project:/var/www/html -v /root/nginx/nginx.conf:/etc/nginx/nginx.conf -v /root/nginx/conf.d:/etc/nginx/conf.d -v /root/nginx/logs:/var/log/nginx -d nginx

然后把組態檔改成如下

下面組態檔的作用是，當訪問38.5.15.5:80的時候，會去nginx服務器中/var/www/html/smartfront/中找到dist打包專案，就可以正常的訪問前端專案了，

upstream myserver {
    server 172.17.0.5:8000;  # 后端請求的地址，因為我們的后端部署在一個容器中，而容器的ip地址是172.17.0.5，api的埠是8000，所以要這樣寫，
    # 如果還有的話，可以繼續往下寫
    # server XXXX;
    # server XXXX;
}

server {
    listen 80;		# 監聽80埠
    client_max_body_size 20m;
    server_name 38.5.15.5;  # 你的服務器地址

    location / {
        root   /var/www/html/smartfront/dist;	# 前端專案打包檔案路徑
        try_files $uri $uri/ /index.html?s=$uri&args;
        index index.html index.htm index.php;
    }
}

歡迎評論區討論，或指出問題，如果覺得寫的不錯，歡迎點贊，轉發，收藏，

轉載請註明出處，本文鏈接：https://www.uj5u.com/ruanti/289827.html

標籤：其他

上一篇：負載均衡（Load Balance）簡單介紹

下一篇：WebRTC之端對端通話

Docker前端部署詳解（Vue+Nginx）

Table of Contents

構建Dockerfile檔案

構建鏡像

根據鏡像創建容器

打包vue專案

修改nginx組態檔