SpringBoot2.1版本的我的應用開發框架 - 使用Docker + Nginx部署項目

本篇做爲SpringBoot2.1版本的我的開發框架 子章節，請先閱讀SpringBoot2.1版本的我的開發框架再次閱讀本篇文章

後端項目地址：SpringBoot2.1版本的我的應用開發框架

前端項目地址：ywh-vue-admin

預覽地址：www.zandy.top

準備

在正式部署到服務器以前，對項目進行一些修改，而且須要對服務器進行一些安裝必要的軟件，例如mysql、redis、nginx等等，由於是用Docker來啓動的，因此還須要安裝Docker

部署環境：

• 阿里雲服務器（Centos7）
• Liunx安裝docker：centos7下Docker CE安裝
• Liunx安裝mysql8.0 ：docker安裝mysql 8
• Liunx安裝Redis：docker安裝Redis
• Liunx安裝Nginx：docker安裝Nginx

由於咱們後端是開的8082端口，因此咱們要在阿里雲的安全組中把8082端口開啓。

優化後端項目

項目在打包時遇到些許錯誤。我已經改正了，這裏就帶一下，不着重記載。若是是clone的我項目，直接進行打包部署環節就能夠了。

• 在使用IDEA的.java使用了未經檢查或不安全的操做，注: 有關詳細信息, 請使用 -Xlint:unchecked 從新編譯。

在common模塊的BaseController類中由於沒有肯定返回的類型，這個是由於這個是通用的一個基礎控制器，因此返回類型有多是任何類型，編譯器認爲不安全吧應該是，因此在打包時也出現了警告，在類上添加下面的註解，讓編譯器不要檢查。

@SuppressWarnings("unchecked")
複製代碼

在cache模塊的RedisCacheConfig類中有引用加了泛型，而new出來的沒有加泛型而報的警告

RedisTemplate<String, Object> template = new RedisTemplate();
# 修改成
RedisTemplate<String, Object> template = new RedisTemplate<>();
複製代碼

• 刪除除了core模塊其餘模塊的啓動類和測試類

• 刪除除了core模塊其餘模塊pom文件的 < build > 標籤

優化前端vue項目

在前端打包後打開首頁會出現空白頁面，這是由於路徑問題找不到css和js文件，修改config->index.js中的

# /表明的是根目錄
assetsPublicPath: '/'
# 修改成當前目錄
assetsPublicPath: './'
複製代碼

在npm run build時報了下圖中錯誤，查閱資料說是版本不匹配，

• 修改package.json中的 html-webpack-plugin": "^4.0.0-alpha爲 html-webpack-plugin": "4.0.0-alpha
• 刪除node_modules 刪除package-lock.json,從新npm install

後端的兩種打包方式

打包能夠有兩種方式進行打包，一種是本地打包好之後把jar包上傳到服務器，一種是把項目放到服務器上後在服務器中進行打包。

注意：在正式打包開始以前，要把數據庫鏈接的IP地址、logback.xml的日誌文件地址、redis的鏈接地址都要修改成本身服務器的相應IP和地址。數據庫鏈接地址我填的是內網地址，redis的我填的公網IP，其實這裏挺讓我納悶的，明明redis和項目都在本機上，爲何不能用內網ip或者127.0.0.1鏈接呢，是個問題哈。

後端本地打包與部署

使用IDEA編輯器中右邊的Maven Projects先點擊clean沒有報錯後點擊package，最上面的箭頭點擊後表明打包過程當中跳過test階段，記得點上。

兩個都點擊後沒有報錯，正常打包成功會在core模塊的target文件下有咱們的jar包了，以artifactId和版本號命名。

建立Dockerfile文件，沒有後綴名，構建項目的鏡像，內容以下

# 基礎鏡像 表示基鏡像是java8
FROM java:8
# 表示 指定臨時文件目錄爲/tmp。其效果是在主機 /var/lib/docker 目錄下建立了一個臨時文件，並連接到容器的/tmp。該步驟是可選的
VOLUME /tmp
# 表示將jar包添加到鏡像中，並重命名app.jar
ADD core-0.0.1-SNAPSHOT.jar app.jar
RUN sh -c 'touch /app.jar'
# 表明的是jvm的參數，若是有須要能夠寫在這裏
ENV JAVA_OPTS=""
# 表示啓動時運行 java -jar app.jar
ENTRYPOINT ["java","-Djava.security.egd=file:/dev/./urandom","-jar","/app.jar"]
複製代碼

把jar包和Dockerfile文件上傳到咱們的服務器中，位置本身定，經過 rz 命令上傳，這兩個文件在同一個文件夾中就能夠了。

$ rz
# 在上傳後的文件夾中開始構建，指定了鏡像的名字爲ywh-frame
$ docker build -t ywh-frame .
# 等待構建成功後，可經過命令查看
$ docker images
# 運行此鏡像文件
$ docker run -d --name ywh-frame --restart always -p 8082:8082  -v /ywh/projectwork/spring/logs:/usr/local/logs  ywh-frame
複製代碼

• -d 表明後臺運行，
• -p 表明端口映射，本機:容器
• -v 文件映射，此文件是項目的日誌文件，右側是容器的日誌文件位置，這個位置可在core模塊的logback-spring.xml配置，在前幾章筆記中有記載
• --name 表明容器名字
• --restart always 表明隨開機啓動

可使用命令查看日誌，看是否正常啓動了，若是有異常信息，則須要根據具體的異常信息去改正。

後端線上打包部署（不推薦）

這種方式比較麻煩，並且須要在Liunx安裝一些必要的環境，不推薦使用，不過仍是要記錄。

安裝java運行時環境和maven

• Liunx中安裝jdk1.8
• Liunx中安裝maven

須要把core模塊的pom文件的打包插件換成docker-maven的插件

<plugin>
	<groupId>com.spotify</groupId>
	<artifactId>docker-maven-plugin</artifactId>
	<version>1.2.0</version>
	<configuration>
		<imageName>${project.artifactId}</imageName>
		<dockerDirectory>${project.build.outputDirectory}</dockerDirectory>
		<resources>
			<resource>
				<targetPath>/</targetPath>
				<directory>${project.build.directory}</directory>
				<include>${project.build.finalName}.jar</include>
			</resource>
		</resources>
	</configuration>
</plugin>
複製代碼

<imageName></imageName> 鏡像的名字
<dockerDirectory></dockerDirectory> Dockerfile文件的位置
<directory></directory> target目錄的位置
<include></include> 打包項目後的jar包名字
複製代碼

建立Dockerfile文件，沒有後綴名，把這個文件放在core模塊下的resource目錄下便可，也能夠放在其餘的目錄下，只須要在上面的標籤指定位置就好了。

# 基礎鏡像 表示基鏡像是java8
FROM java:8
# 表示 指定臨時文件目錄爲/tmp。其效果是在主機 /var/lib/docker 目錄下建立了一個臨時文件，並連接到容器的/tmp。該步驟是可選的
VOLUME /tmp
# 表示將jar包添加到鏡像中，並重命名app.jar
ADD core-0.0.1-SNAPSHOT.jar app.jar
RUN sh -c 'touch /app.jar'
# 表明的是jvm的參數，若是有須要能夠寫在這裏
ENV JAVA_OPTS=""
# 表示啓動時運行 java -jar app.jar
ENTRYPOINT ["java","-Djava.security.egd=file:/dev/./urandom","-jar","/app.jar"]
複製代碼

把項目上傳到服務器，只上傳每一個模塊的src和pom文件就行了

#找到項目所在目錄
$ cd /ywh/projectwork/spring/ywh-frame
#根目錄下進行 install
$ mvn clean install package -Dmaven.test.skip=true
#進入core模塊下
$ cd ywh-starter-core/
#執行maven命令生成jar包和鏡像
$ mvn package docker:build -Dmaven.test.skip=true
# docker運行命令
$ docker run -d --name ywh-frame --restart always -p 8082:8082  -v /ywh/projectwork/spring/logs:/usr/local/logs  ywh-frame
複製代碼

前端vue項目打包部署

注意：在打包前端項目以前須要修改 config->prod.env.js中的BASE_APIIP爲本身服務器的IP地址，我填的是公網IP，爲了確保能夠把dev.env.js中的BASE_API也修改了。

在有node_modules的前提下，直接運行命令會在項目中下面的命令，會在本項目中生成一個 dist 文件夾。

# 在前端項目的文件夾下運行此命令
$ npm run build
複製代碼

服務器上要安裝Nginx，安裝方法已經在筆記的開頭有連接介紹,也是以docker來啓動的，這時把生成的靜態文件打包上傳到Liunx服務器Nginx的root目錄下便可，主要是Nginx的安裝和配置，頁面無非是靜態頁面。

$ cd /home/www/website
$ rz 
$ tar -xvf dist.tar
複製代碼

結束

若是所有正常啓動，在你的服務器上啓動的容器應該有四個

如下是個人預覽地址，由於後端管理的vue項目我還沒來的及修改和規劃，因此只是最初的頁面，並且除了主頁其餘頁面由於沒有了mock的支持，除了主頁其餘頁面都不能正常訪問，不過這沒關係，由於個人主要目的只是熟悉這些流程，具體的業務我能夠後面慢慢的加，由於域名備案比較麻煩，因此如今只能IP地址來訪問了。

• 預覽地址：www.zandy.top