docker部署前後端分離項目

原創

denglaosao

2019-06-11 03:32

架構：後端基於springboot框架搭建，並且通過consul實現服務註冊與發現，前端基於vue框架搭建
操作步驟：

docker環境準備
在部署前先要安裝docker環境，docker就相當於運行在操作系統上的一個應用程序，所以相比虛擬機有許多的優勢；docker的安裝也比較簡單，本文以centos7爲例，
主要通過yum安裝。
先安裝一些必要的系統工具：
sudo yum install -y yum-utils device-mapper-persistent-data lvm2
添加軟件源信息：
sudo yum-config-manager --add-repo http://mirrors.aliyun.com/docker-ce/linux/centos/docker-ce.repo
更新yum緩存：
sudo yum makecache fast
然後就可以安裝Dokcer-ce：
安裝完後就可以通過如下命令啓動docker：
sudo systemctl start docker
systemctl stop docker(關閉命令)
至此docker的環境搭建完成，鑑於國內網絡問題，後續拉取docker鏡像可能比較慢，可配置鏡像加速，對於linux環境，在/etc/docker/daemon.json中加入如下配置：
{
“registry-mirrors”: [“http://hub-mirror.c.163.com”]
}
後端項目部署
由於我們這個項目用了consul實現服務的註冊於發現，所以我們先利用docker運行一個consul服務，由於docker官方倉庫已經有了consul鏡像，所以我們直接利用命令docker pull consul就可以下載consul的鏡像文件，然後執行命令
docker images就可以看到下載好的鏡像文件如下圖：

然後執行如下命令，啓動鏡像：
docker run -itd -p 8500:8500 --name consul consul:latest
就開啓了一個consul服務，命令具體參數的涵義下面有講。
(1)生成鏡像文件
首先將寫好的基於springboot框架的web項目打成jar包，然後將Dockerfile文件和上述的jar包放置在同一個目錄下，Dockerfile中的內容如下：
FROM openjdk:8-jdk-alpine
VOLUME /tmp
ADD oa-admin-1.0.0.jar app.jar
ENTRYPOINT [“java”,"-Djava.security.egd=file:/dev/./urandom","-jar","/app.jar"]
裏面的oa-admin-1.0.0.jar即爲剛生成的jar包，最終效果如下：

切換到/usr/local/app/os/admin目錄下執行如下命令：
docker build -t oa-admin:v1.0.0 .
上面的命令就是根據dockerfile文件生成鏡像，其中oa-admin就是生成的鏡像名稱，冒號後面的v1.0.0就是鏡像的版本號，注意最後面的點不能省略，生成完後我們可以通過docker images查看生成的鏡像如下圖所示：

這樣我們就生成了一個鏡像文件。
(2)啓動鏡像生成容器
然後我們啓動這個鏡像文件，執行如下命令：
docker run -itd -p 8100:8100 --name oa-admin fe5c74ce9ca3
就可以啓動這個鏡像了。其中-itd相當於 -i -d -t 寫在一起也可以，他們的涵義分別爲：
-i: 以交互模式運行容器，通常與 -t 同時使用；
-t: 爲容器重新分配一個僞輸入終端，通常與 -i 同時使用；
-d: 後臺運行容器，並返回容器ID；
–name爲生成的容器的名稱，後面一串長的字符串爲上圖中鏡像的id，也可以改成鏡像名：版本號。
-p 的意思是將容器裏面跑的web項目的端口映射到宿主機，這樣我們就可以通過宿主機的ip加上映射的端口訪問容器裏跑的web項目，例如我的宿主機的ip爲192.168.1.82(內網),此時我們就可以通過http://192.168.1.82:8100訪問我們在容器裏運行的web項目。
常用的部署一般這樣就可以了，還有一些其他的需求，例如docker容器之間的網絡配置、文件的掛載等就不在此多說，可自行百度。
前端項目部署
基於vue的前後端分離的項目的部署可以將前端build之後的文件放在後端項目裏面，這樣就只要部署一次，不過這樣不方便管理，所以此次我們採用前後端分開部署的方式。前端的部署其實我們只需要一個能提供http訪問功能的服務就可以了，本次我們利用nginx來部署前端項目。
我們可以利用docker運行一個nginx服務，也可以在本地運行一個nginx，關於nginx的安裝在此省略。主要提供如何將前端項目部署在nginx上並提供http訪問。
(1) 打包前端項目
前端項目執行npm run build就會在項目的根目錄下生成一個dist目錄結構如下圖所示：

裏面已經將我們寫好的前端頁面包括那些js、css等文件都打在包裏面。
然後將這個dist文件放置在nginx目錄下的oa目錄下，具體根據自己目錄配置。
一般來說nginx安裝完後的主目錄爲/usr/local/nginx ，在這個目錄下我新建了一個目錄oa，然後把dist文件拷進來，此時的目錄結構如下：

(2) Nginx配置文件配置
前端項目文件放置在nginx目錄下之後，我們就要開始配置ngixn的配置文件nginx.conf;該配置文件一般在/usr/local/nginx/conf目錄下，裏面有個默認配置文件，我們修改的內容主要爲下圖所示部分：

其中listen就是監聽宿主機上的8888端口，location / 下面配置的root目錄就是之前我們dist文件的放置目錄，index就是我們訪問時會去找這些文件。
配置好了之後我們就可以重啓，然後通過192.168.1.82:8888就可以訪問到我們的前端項目的首頁了。