一、前言
我們常常見到很多比較棒的開源項目,但在本地安裝運行的話就會很復(fù)雜,要配置不同的環(huán)境,安裝不同的依賴,好一點的會用docker直接拉取,或者打包好。
這些無疑都會增加初學(xué)者上手的成本,所以這篇文章總結(jié)了下目前比較常用的解決方法之一:
使用docker-compose同時管理多個服務(wù),只需要一行命令docker compose up -d,就可以啟動一個包含后端項目、前端項目、數(shù)據(jù)庫的完整服務(wù)。
而docker-compose作為docker容器的編排工具,可以幫助我們實現(xiàn)管理多個docker容器。
其實整體的過程并不難,但要配置完成,也要很多步驟,這篇文章主要是從實戰(zhàn)的角度,將整個過程串起來。涉及的知識點包括:nginx、docker、docker-compose、node、mysql也需要了解下。適合讀下去的朋友:
- 對Docker有基本的了解
- 同時需要部署多個項目
- 需要開源項目或者自建項目的整體部署
- 需要打包部署一整個網(wǎng)站
- Docker安裝并啟動(演示版本如下)
- docker-compose(安裝Docker同時會自動安裝,如果沒有可以自行安裝,也很簡單)
- 一個前端項目(這里演示使用React SPA)
- 一個后端項目(這里使用Express)
如圖所示,通過docker-componse.yml文件一次啟動不同的容器,然后他們都可以對外提供服務(wù)。
二、前端項目構(gòu)建
1、前端項目處理
首先我們通過CRA下載一個項目模版,為了可以模擬實際的項目需要,對下載的模版做一些處理,讓這個項目可以
1、區(qū)分當(dāng)前項目是預(yù)發(fā)環(huán)境還是生產(chǎn)環(huán)境
2、引入Axios可以請求接口
接著我們打包yarn build:prod,打包后的文件夾build就是我們要部署的靜態(tài)資源。 在前面工程化實踐過程中提過相關(guān)內(nèi)容,如果有問題可以參考下- 前端工程化實踐 - React項目配置預(yù)發(fā)環(huán)境和生產(chǎn)環(huán)境(三)[1]
2、拉取Nginx鏡像部署
我們通過Docker部署前面打包的靜態(tài)資源
當(dāng)前項目的路徑是/Users/user/Desktop/mine/fronted-demo2/build
直接運行下面命令行,啟動前端服務(wù)
dockerrun-d-p80:80-v/Users/user/Desktop/mine/fronted-demo2/build:/usr/share/nginx/html--namefrontend-testnginx
通過本機80端口訪問,發(fā)現(xiàn)當(dāng)前服務(wù)是生產(chǎn)環(huán)境,并且由于后端服務(wù)沒有部署,此時數(shù)據(jù)庫拿到的數(shù)據(jù)為空。 ?測試,我們切換路由,發(fā)現(xiàn)頁面404了,是因為單頁面應(yīng)用路由在前端,需要nginx轉(zhuǎn)發(fā)下,接著我們用項目中的Nginx配置覆蓋容器中的配置
3、提取Nginx配置到項目中
首先,我們進入上一步的Docker容器,可以看到Nginx的路徑。
docker exec -it frontend-test /bin/bash
?在項目根目錄下新建nginx/default.conf然后通過掛載的方式,啟動容器,發(fā)現(xiàn)訪問正常。server {
listen 80;
server_name localhost;
underscores_in_headers on;
root /home/frontend;
location / {
try_files $uri $uri/ @router;
index index.html;
}
location @router {
rewrite ^.*$ /index.html last;
}
}
4、編寫Dockerfile文件
在項目根目錄下,新建Dockerfile文件,其中包括基礎(chǔ)鏡像、工作目錄、將項目copy到鏡像,將Nginx配置文件復(fù)制到鏡像中。FROM nginx
WORKDIR /home/frontend
COPY build .
COPY ./nginx/default.conf /etc/nginx/conf.d/default.conf
EXPOSE 80
5、構(gòu)建前端服務(wù)鏡像并啟動
可以發(fā)現(xiàn)前端服務(wù)的鏡像已經(jīng)打包完成并啟動,打開本地80端口訪問,測試完畢可以刪除,然后留鏡像frontend備用。也可以將鏡像推送鏡像倉庫,后面直接通過遠(yuǎn)程來拉取也可以。docker build -t frontend .
docker images
docker run -d -p 80:80 --name frontend-v1 frontend
主意:如果之前的Docker容器啟動,需要先關(guān)掉,否則會報端口被占用,如果不刪除,就需要修改重新啟動容器的名字。
三、數(shù)據(jù)庫啟動
1、拉取并啟動數(shù)據(jù)庫、連接數(shù)據(jù)庫
dockerrun-p3306:3306--restart=always--privileged=true--namemysql-v/Users/user/Desktop/mysql/data:/var/lib/mysql-v/Users/user/Desktop/mysql/my.cnf:/etc/mysql/my.cnf-eMYSQL_ROOT_PASSWORD="123456"-dmariadb
一行命令啟動Mariadb,這里選擇Mariadb是由于我m1的電腦,不支持mysql鏡像,所以改成了Mariadb,使用是一樣。上面的命令除了啟動數(shù)據(jù)庫服務(wù),還設(shè)置了數(shù)據(jù)的一些配置,密碼,將數(shù)據(jù)庫的數(shù)據(jù)放在了本地。
[mysqld]
skip-name-resolve
user=root
character-set-server=utf8
default_authentication_plugin=mysql_native_password
sql_mode=ONLY_FULL_GROUP_BY,STRICT_TRANS_TABLES,ERROR_FOR_DIVISION_BY_ZERO,NO_AUTO_CREATE_USER,NO_ENGINE_SUBSTITUTION
lower_case_table_names=1 #忽略表名大小寫
[client]
default-character-set=utf8
[mysql]
default-character-set=utf8
2、新建庫和表
這里可以進入容器中操作數(shù)據(jù)庫,還可以使用客戶端連接數(shù)據(jù)庫 ?四、后端項目啟動
1、下載Express項目模版并連接數(shù)據(jù)庫
這里配置數(shù)據(jù)庫,寫好項目接口,確保本地啟動服務(wù)正常。
2、拉起鏡像,部署鏡像
部署服務(wù),我們選擇使用pm2,為了區(qū)分生產(chǎn)環(huán)境和預(yù)發(fā)環(huán)境,我們在根目錄下新建pm2.config.js,然后通過傳入不同的參數(shù),啟動對應(yīng)的環(huán)境
啟動預(yù)發(fā)環(huán)境pm2 start pm2.config.js --env development 啟動生產(chǎn)環(huán)境pm2 start pm2.config.js --env production 再項目中通過process.env.NODE_ENV讀取module.exports = {
apps : [
{
name: "myapp",
script: "./bin/www",
watch: true,
env: {
"NODE_ENV": "development"
},
env_production: {
"NODE_ENV": "production",
}
}
]
}
3、編寫Dockerfile并構(gòu)建新的鏡像
FROM keymetrics/pm2
RUN mkdir -p /home/backend
WORKDIR/home/backend
審核編輯:湯梓紅
-
開源
+關(guān)注
關(guān)注
3文章
3181瀏覽量
42235 -
容器
+關(guān)注
關(guān)注
0文章
490瀏覽量
22013 -
nginx
+關(guān)注
關(guān)注
0文章
141瀏覽量
12143 -
Docker
+關(guān)注
關(guān)注
0文章
446瀏覽量
11773
原文標(biāo)題:Docker-compose打包項目一鍵部署
文章出處:【微信號:magedu-Linux,微信公眾號:馬哥Linux運維】歡迎添加關(guān)注!文章轉(zhuǎn)載請注明出處。
發(fā)布評論請先 登錄
相關(guān)推薦
評論