SpringBoot2.1版本的個人應用開發框架 - 使用Docker + Nginx部署專案

人生長恨水發表於2019-04-11
Spring Boot框架DockerNginx

本篇作為SpringBoot2.1版本的個人開發框架 子章節，請先閱讀SpringBoot2.1版本的個人開發框架再次閱讀本篇文章

後端專案地址：SpringBoot2.1版本的個人應用開發框架

前端專案地址：ywh-vue-admin

預覽地址：www.zandy.top

準備

在正式部署到伺服器之前，對專案進行一些修改，並且需要對伺服器進行一些安裝必要的軟體，例如mysql、redis、nginx等等，因為是用Docker來啟動的，所以還需要安裝Docker

部署環境：

因為我們後端是開的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時報了下圖中錯誤，查閱資料說是版本不匹配，

20190411095554

  • 修改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階段，記得點上。

20190410152310
20190410151707

兩個都點選後沒有報錯，正常打包成功會在core模組的target檔案下有我們的jar包了，以artifactId和版本號命名。

20190410152604

建立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

需要把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
複製程式碼

20190411101936

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

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

結束

如果全部正常啟動，在你的伺服器上啟動的容器應該有四個

20190411105107
以下是我的預覽地址，因為後端管理的vue專案我還沒來的及修改和規劃，所以只是最初的頁面，而且除了主頁其他頁面因為沒有了mock的支援，除了主頁其他頁面都不能正常訪問，不過這不要緊，因為我的主要目的只是熟悉這些流程，具體的業務我可以後面慢慢的加，因為域名備案比較麻煩，所以現在只能IP地址來訪問了。

相關文章