Docker はフロントエンドとバックエンドの分離プロジェクトをデプロイします

工具の準備

ツール接続

工具の準備

工具の準備

クラウドサーバー、Alibaba Cloud、Baidu Cloud、または Tencent Cloud を使用できます。

リモート接続ツール (Xshell または Finalshell)。

ローカルデータベース、Navicat、mysqlworkbench、またはアイデアも使用できます。

この記事では、Baidu クラウドサーバー、finalshell、navicat を使用します。

ツール接続

最終シェルを開く

Dockerをインストールする

1. 古いバージョンをアンインストールします (新しいサーバーの場合は、この手順を実行する必要はありません)。

sudo yum remove docker \
                  docker-client \
                  docker-client-latest \
                  docker-common \
                  docker-latest \
                  docker-latest-logrotate \
                  docker-logrotate \
                  docker-engine

2. インストールyum-utils ツールキット

sudo yum install -y yum-utils

3. Alibaba Cloud ウェアハウスをセットアップする

sudo yum-config-manager --add-repo http://mirrors.aliyun.com/docker-ce/linux/centos/docker-ce.repo

4. 依存関係を更新します (インストールするディレクトリに切り替えるか、新しいディレクトリを作成します)。

sudo yum update

5. docker（最新バージョン）をインストールする

sudo yum install docker-ce docker-ce-cli containerd.io

6. インストールが成功したかどうかを確認します

docker version

7.ドッカーの起動

sudo systemctl start docker

MySQLデータベースを導入する

1. docker を使用して mysql イメージを実行します

 docker run --name test-mysql -p 3310:3306 -e MYSQL_ROOT_PASSWORD=root -d mysql

test-mysql：容器名
mysql：镜像名
-p 3310:3306：把服务器的3310端口映射到容器的3306端口，后面通过3310端口访问数据库
MYSQL_ROOT_PASSWORD=root：设置root账户的密码为root

作成したばかりのイメージを表示します

2. test-mysql コンテナに入ります

docker exec -it test-mysql bash

3. root アカウントにログインし、パスワードを入力します。

mysql -uroot -p

4. root アカウントに、外部からすべてのデータベースに接続する権限を付与します。

GRANT ALL PRIVILEGES ON *.* TO 'root'@'%' WITH GRANT OPTION;

//如果只想赋予某个数据库的外部访问权限，就把*.*改成sqlname.*

FLUSH PRIVILEGES;  //让该设置生效

输入exit退出镜像
输入exit退出容器

5. navicat を開いてデータベースに接続します

新しい接続

新しいデータベースを作成する

SQLファイルをインポートする

バックエンドサービスを展開する

1. 1. Maven パッケージを使用してプロジェクトをパッケージ化し、生成されたターゲットフォルダーで jar パッケージを見つけて、クラウドサーバー上の任意のディレクトリに jar パッケージをアップロードします。

2. 任意のディレクトリに新しいディレクトリを作成し、そのディレクトリに jar パッケージをアップロードします。

3. jar パッケージが保存されているディレクトリに Dockerfile を作成します。

cd /home/crm-backend

touch Dockerfile

Dockerfile ファイルの内容は次のとおりです。

FROM java:8
VOLUME /tmp
ADD *.jar /app.jar
EXPOSE 56000
 
RUN sh -c 'touch /app.jar'
ENV JAVA_OPTS=""
ENTRYPOINT [ "sh", "-c", "java $JAVA_OPTS -Djava.security.egd=file:/dev/./urandom -jar /app.jar" ]

4. jar パッケージと Dockerfile ファイルが含まれるディレクトリに crm-backend イメージを作成します。

docker build -t crm-backend .

//把crm-backend改成你想要起的镜像名

5. crm-backend コンテナーを作成し、crm-backend イメージを実行します (イメージ名はコンテナー名と同じにすることができます) サーバーおよびコンテナーで実行されているイメージのポートが 56000 であることを指定します。

docker run -d -p 56000:56000 --name crm-backend crm-backend

フロントエンドサービスを展開する

1. フロントエンド構成ファイルの構成を変更します。

2. idea でフロントエンドプロジェクト名をクリックし、右クリックしてターミナルで開くを選択し、ターミナルで npm run build を実行すると、ディレクトリ内に dist フォルダーが生成されます。

3. サーバー上の任意の場所に新しいフォルダーを作成し、そのフォルダーに dist フォルダーをアップロードします。

4. この dist と同じディレクトリに、default.conf ファイルを作成します。

ファイルの内容は次のとおりです (# コメントを削除することを忘れないでください)。

server {
    listen       8092;    #前端在容器里运行的端口号
    server_name  182.61.132.29;   #服务器的IP地址

    location /admin/ {
      proxy_pass http://182.61.132.29:56000;     #后端服务的地址
    }
    
#    location / {
#        root   /usr/share/nginx/html;
#        index  index.html index.htm;
#        try_files $uri $uri/ /index.html =404;
#    }

	location / {
	        root   /usr/share/nginx/html;
	        index  index.html;
	        try_files $uri $uri/ /index.html;
	}
 
    error_page   500 502 503 504  /50x.html;
    location = /50x.html {
        root   html;
    }
}

5. 同じディレクトリに次の内容の新しい Dockerfile ファイルを作成します。

# 基础镜像使用Nginx
FROM nginx
# 作者
MAINTAINER hxx
# 添加时区环境变量，亚洲，上海
ENV TimeZone=Asia/Shanghai
# 将前端dist文件中的内容复制到nginx目录
COPY dist  /usr/share/nginx/html/
# 用本地的nginx配置文件覆盖镜像的Nginx配置
COPY default.conf /etc/nginx/conf.d
# 声明容器内部要监听的端口
EXPOSE 8092

6. 次に crm-front コンテナを作成します

docker build -t crm-front .

7. crm-front イメージを作成して実行します

docker run -d -p 8092:8092 --name crm-front crm-front

8. 動作状況の確認

docker ps

9. ブラウザを開き、フロントエンドアドレスを入力してフロントエンドにアクセスします。成功しました。 (フロントエンドがバックエンドにアクセスできない場合は、nigx リバースプロキシが無効である可能性があります。他の記事を参照してください。 nginx リバースプロキシが無効で、フロントエンドはバックエンドのデータフロントエンドとバックエンドが接続できません