0
  • 聊天消息
  • 系統(tǒng)消息
  • 評論與回復(fù)
登錄后你可以
  • 下載海量資料
  • 學(xué)習(xí)在線課程
  • 觀看技術(shù)視頻
  • 寫文章/發(fā)帖/加入社區(qū)
會員中心
創(chuàng)作中心

完善資料讓更多小伙伴認(rèn)識你,還能領(lǐng)取20積分哦,立即完善>

3天內(nèi)不再提示

docker compose一鍵打包部署項目的實踐

馬哥Linux運維 ? 來源:稀土掘金技術(shù)社區(qū) ? 作者: 前端中后臺 ? 2022-08-30 11:03 ? 次閱讀
【導(dǎo)讀】本文介紹了 docker compose 一鍵打包部署項目的實踐。

一、前言

我們常常見到很多比較棒的開源項目,但在本地安裝運行的話就會很復(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)站
需要提前準(zhǔn)備的:
  • Docker安裝并啟動(演示版本如下)
98106d6a-27a0-11ed-ba43-dac502259ad0.jpg
  • docker-compose(安裝Docker同時會自動安裝,如果沒有可以自行安裝,也很簡單)
  • 一個前端項目(這里演示使用React SPA)
  • 一個后端項目(這里使用Express)
983271a8-27a0-11ed-ba43-dac502259ad0.jpg

如圖所示,通過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

	

985299d8-27a0-11ed-ba43-dac502259ad0.jpg

通過本機80端口訪問,發(fā)現(xiàn)當(dāng)前服務(wù)是生產(chǎn)環(huán)境,并且由于后端服務(wù)沒有部署,此時數(shù)據(jù)庫拿到的數(shù)據(jù)為空。 9868807c-27a0-11ed-ba43-dac502259ad0.png ?測試,我們切換路由,發(fā)現(xiàn)頁面404了,是因為單頁面應(yīng)用路由在前端,需要nginx轉(zhuǎn)發(fā)下,接著我們用項目中的Nginx配置覆蓋容器中的配置

3、提取Nginx配置到項目中

首先,我們進入上一步的Docker容器,可以看到Nginx的路徑。


	
docker exec -it frontend-test /bin/bash
9891cc7a-27a0-11ed-ba43-dac502259ad0.jpg ?在項目根目錄下新建nginx/default.conf

	
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;    }}
然后通過掛載的方式,啟動容器,發(fā)現(xiàn)訪問正常。

4、編寫Dockerfile文件


	
FROM nginx
WORKDIR /home/frontend
COPY build .
COPY ./nginx/default.conf /etc/nginx/conf.d/default.conf
EXPOSE 80
在項目根目錄下,新建Dockerfile文件,其中包括基礎(chǔ)鏡像、工作目錄、將項目copy到鏡像,將Nginx配置文件復(fù)制到鏡像中。

5、構(gòu)建前端服務(wù)鏡像并啟動


	
docker build -t frontend .
docker images
docker run -d -p 80:80 --name frontend-v1 frontend
可以發(fā)現(xiàn)前端服務(wù)的鏡像已經(jīng)打包完成并啟動,打開本地80端口訪問,測試完畢可以刪除,然后留鏡像frontend備用。也可以將鏡像推送鏡像倉庫,后面直接通過遠(yuǎn)程來拉取也可以。
主意:如果之前的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-resolveuser=rootcharacter-set-server=utf8default_authentication_plugin=mysql_native_passwordsql_mode=ONLY_FULL_GROUP_BY,STRICT_TRANS_TABLES,ERROR_FOR_DIVISION_BY_ZERO,NO_AUTO_CREATE_USER,NO_ENGINE_SUBSTITUTIONlower_case_table_names=1 #忽略表名大小寫
[client]default-character-set=utf8[mysql]default-character-set=utf8

2、新建庫和表

這里可以進入容器中操作數(shù)據(jù)庫,還可以使用客戶端連接數(shù)據(jù)庫 989fd70c-27a0-11ed-ba43-dac502259ad0.jpg ?

四、后端項目啟動

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)境


	
module.exports = {  apps : [      {        name: "myapp",        script: "./bin/www",        watch: true,        env: {            "NODE_ENV": "development"        },        env_production: {            "NODE_ENV": "production",        }      }  ]}
啟動預(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讀取

3、編寫Dockerfile并構(gòu)建新的鏡像


	
FROM keymetrics/pm2
RUN mkdir -p /home/backend
WORKDIR/home/backend

審核編輯:湯梓紅


聲明:本文內(nèi)容及配圖由入駐作者撰寫或者入駐合作網(wǎng)站授權(quán)轉(zhuǎn)載。文章觀點僅代表作者本人,不代表電子發(fā)燒友網(wǎng)立場。文章及其配圖僅供工程師學(xué)習(xí)之用,如有內(nèi)容侵權(quán)或者其他違規(guī)問題,請聯(lián)系本站處理。 舉報投訴
  • 開源
    +關(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)載請注明出處。

收藏 人收藏

    評論

    相關(guān)推薦

    使用Helm 在容器服務(wù)k8s集群一鍵部署wordpress

    :可以根據(jù)用戶自身的需要,修改wordpress安裝charts的些默認(rèn)配置,當(dāng)然使用默認(rèn)配置安裝也是沒問題的,輸入本次安裝release的名字,點擊部署后就完成了一鍵部署。我們使用
    發(fā)表于 03-29 13:38

    云計算核心技術(shù)Docker教程:Docker Compose的pull和push命令詳解

    Docker-Compose pull命令可以拉取docker-compose.yml或者docker-stack.yml文件中定義的服務(wù)關(guān)聯(lián)的鏡像,Docker-Compose pu
    的頭像 發(fā)表于 11-17 18:22 ?9102次閱讀

    Docker-compose常用的解決方法

    我們常常見到很多比較棒的開源項目,但在本地安裝運行的話就會很復(fù)雜,要配置不同的環(huán)境,安裝不同的依賴,好點的會用docker直接拉取,或者打包好。
    的頭像 發(fā)表于 09-05 15:22 ?1408次閱讀

    Jenkins+docker+springboot一鍵自動部署項目

    本文章實現(xiàn)最簡單全面的Jenkins+docker+springboot 一鍵自動部署項目,步驟齊全,少走坑路。
    的頭像 發(fā)表于 09-14 09:30 ?1543次閱讀

    使用podman-compose部署wordpress的示例

    我們對于docker-compose并不陌生,它是個用于編排多個可能相互依賴的容器的工具。
    的頭像 發(fā)表于 10-17 10:59 ?2624次閱讀

    Jenkins+Docker一鍵自動化部署SpringBoot最簡流程

    簡述實現(xiàn)步驟:在docker安裝jenkins,配置jenkins基本信息,利用Dockerfile和shell腳本實現(xiàn)項目自動拉取打包并運行。
    的頭像 發(fā)表于 11-23 10:16 ?1292次閱讀

    Jenkins+Docker一鍵自動化部署SpringBoot項目

    本文章實現(xiàn)最簡單全面的Jenkins+docker+springboot 一鍵自動部署項目,步驟齊全,少走坑路。
    的頭像 發(fā)表于 12-14 10:04 ?855次閱讀

    Jenkins+Docker實現(xiàn)一鍵自動化部署項目

    本文章實現(xiàn)最簡單全面的Jenkins+docker+springboot 一鍵自動部署項目,步驟齊全,少走坑路。
    的頭像 發(fā)表于 01-06 15:36 ?1192次閱讀

    關(guān)于Jenkins+docker+springboot一鍵自動部署項目

    本文章實現(xiàn)最簡單全面的Jenkins+docker+springboot 一鍵自動部署項目,步驟齊全,少走坑路。
    的頭像 發(fā)表于 05-16 08:59 ?784次閱讀
    關(guān)于Jenkins+<b class='flag-5'>docker</b>+springboot<b class='flag-5'>一鍵</b>自動<b class='flag-5'>部署</b><b class='flag-5'>項目</b>

    Jenkins+Docker一鍵自動化部署SpringBoot應(yīng)用最精簡流程

    簡述實現(xiàn)步驟:在docker安裝jenkins,配置jenkins基本信息,利用Dockerfile和shell腳本實現(xiàn)項目自動拉取打包并運行。
    的頭像 發(fā)表于 11-06 16:27 ?2116次閱讀
    Jenkins+<b class='flag-5'>Docker</b><b class='flag-5'>一鍵</b>自動化<b class='flag-5'>部署</b>SpringBoot應(yīng)用最精簡流程

    docker部署mysql的壞處

    Docker種虛擬化技術(shù),它允許開發(fā)人員在容器內(nèi)打包應(yīng)用程序及其所有依賴項,從而實現(xiàn)在不同環(huán)境中運行相同的應(yīng)用程序的能力。然而,在使用 Docker
    的頭像 發(fā)表于 11-23 09:29 ?1288次閱讀

    docker核心組件有哪些

    Docker種開源的容器化平臺,它能夠?qū)崿F(xiàn)將應(yīng)用程序及其依賴項打包個可移植的容器中,從而實現(xiàn)快速、可重復(fù)、可擴展的部署和管理。
    的頭像 發(fā)表于 11-23 09:47 ?1672次閱讀

    如何利用樹莓派安裝DockerDocker-compose呢?

    本文主要演示了樹莓派如何安裝DockerDocker-compose的過程。
    的頭像 發(fā)表于 12-14 16:19 ?2544次閱讀
    如何利用樹莓派安裝<b class='flag-5'>Docker</b>和<b class='flag-5'>Docker-compose</b>呢?

    寶塔面板一鍵免費部署LobeChat聊天機器人開發(fā)自己私有的ChatGPT

    寶塔面板部署一鍵免費部署LobeChat自己的私有聊天機器人 支持市場主流AId api調(diào)用; ?寶塔面板Docker 部署LobeChat
    的頭像 發(fā)表于 06-26 17:03 ?870次閱讀
    寶塔面板<b class='flag-5'>一鍵</b>免費<b class='flag-5'>部署</b>LobeChat聊天機器人開發(fā)自己私有的ChatGPT

    寶塔面板Docker一鍵安裝:部署GPTAcademic,開發(fā)私有GPT學(xué)術(shù)優(yōu)化工具

    人工智能的浪潮中,GPT模型因其強大的自然語言處理能力備受矚目。然而,為了更好地應(yīng)用于學(xué)術(shù)領(lǐng)域,許多人希望能部署自己私有的GPT學(xué)術(shù)優(yōu)化工具。本文將詳細(xì)介紹如何通過寶塔面板和Docker一鍵安裝
    的頭像 發(fā)表于 07-02 11:58 ?2280次閱讀
    寶塔面板<b class='flag-5'>Docker</b><b class='flag-5'>一鍵</b>安裝:<b class='flag-5'>部署</b>GPTAcademic,開發(fā)私有GPT學(xué)術(shù)優(yōu)化工具