Docker stellt Front-End- und Back-End-Trennungsprojekte bereit

Inhaltsverzeichnis

Werkzeugvorbereitung

Werkzeuganschluss

Inhaltsverzeichnis

 Werkzeugvorbereitung

Werkzeuganschluss

Installieren Sie Docker

Stellen Sie die MySQL-Datenbank bereit

Stellen Sie Backend-Dienste bereit 

Stellen Sie Front-End-Dienste bereit

---

 Werkzeugvorbereitung

        ​​​Es kann ein Cloud-Server, Alibaba Cloud, Baidu Cloud oder Tencent Cloud verwendet werden.

        Ein Remote-Verbindungstool, entweder Xshell oder Finalshell.

        Es können lokale Datenbanken, Navicat, MySQLworkbench oder sogar Idea verwendet werden.

Dieser Artikel verwendet den Baidu-Cloud-Server, Finalshell und Navicat.

Werkzeuganschluss

        Finalshell öffnen

Installieren Sie Docker

1. Deinstallieren Sie die alte Version (wenn es sich um einen neuen Server handelt, müssen Sie diesen Schritt nicht ausführen)

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

2. Installationyum-utils Toolkit

sudo yum install -y yum-utils

3. Richten Sie das Alibaba Cloud Warehouse ein

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

4. Abhängigkeiten aktualisieren (wechseln Sie in das Verzeichnis, das Sie installieren möchten, oder erstellen Sie ein neues Verzeichnis)

sudo yum update

5. Docker installieren (neueste Version)

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

6. Überprüfen Sie, ob die Installation erfolgreich war

docker version

7. Starten Sie Docker

sudo systemctl start docker

Stellen Sie die MySQL-Datenbank bereit

1. Verwenden Sie Docker, um das MySQL-Image auszuführen

 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

Sehen Sie sich das gerade erstellte Bild an

2. Geben Sie den test-mysql-Container ein

docker exec -it test-mysql bash

3. Melden Sie sich beim Root-Konto an und geben Sie das Passwort ein

mysql -uroot -p

4. Erteilen Sie dem Root-Konto die Berechtigung, von außen eine Verbindung zu allen Datenbanken herzustellen.

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

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

FLUSH PRIVILEGES;  //让该设置生效

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

5. Öffnen Sie Navicat, um eine Verbindung zur Datenbank herzustellen

Neue Verbindung

 Erstellen Sie eine neue Datenbank

SQL-Datei importieren

Stellen Sie Backend-Dienste bereit 

1. 1. Packen Sie das Projekt mit dem Maven-Paket, suchen Sie das JAR-Paket im generierten Zielordner und laden Sie das JAR-Paket in ein beliebiges Verzeichnis auf dem Cloud-Server hoch.

2. Erstellen Sie in einem beliebigen Verzeichnis ein neues Verzeichnis und laden Sie das JAR-Paket in das Verzeichnis hoch

3. Erstellen Sie eine Docker-Datei in dem Verzeichnis, in dem das JAR-Paket gespeichert ist.

cd /home/crm-backend

touch Dockerfile

 Der Inhalt der Dockerfile-Datei ist wie folgt:

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. Erstellen Sie das crm-backend-Image in dem Verzeichnis, das das JAR-Paket und die Dockerfile-Datei enthält.

docker build -t crm-backend .

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

5. Erstellen Sie den crm-backend-Container und führen Sie das crm-backend-Image aus (der Image-Name kann mit dem Containernamen identisch sein). Geben Sie an, dass der Port des auf dem Server und im Container ausgeführten Images 56000 ist.

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

Stellen Sie Front-End-Dienste bereit

1. Ändern Sie die Konfiguration in der Front-End-Konfigurationsdatei

2. Klicken Sie im Grunde auf den Namen des Front-End-Projekts, klicken Sie mit der rechten Maustaste, wählen Sie „Im Terminal öffnen“ und führen Sie „npm run build“ im Terminal aus. Anschließend wird der Ordner „dist“ im Verzeichnis generiert.

3. Erstellen Sie irgendwo auf dem Server einen neuen Ordner und laden Sie den dist-Ordner in den Ordner hoch.

4. Erstellen Sie die Datei default.conf im selben Verzeichnis wie dieser Dist

Der Inhalt der Datei ist wie folgt (denken Sie daran, den #-Kommentar zu löschen):

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. Erstellen Sie im selben Verzeichnis eine neue Dockerfile-Datei mit folgendem Inhalt:

# 基础镜像使用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. Erstellen Sie dann den CRM-Front-Container

docker build -t crm-front .

7. Erstellen Sie das CRM-Front-Image und führen Sie es aus

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

8. Überprüfen Sie den Betriebsstatus

docker ps

9. Öffnen Sie den Browser und geben Sie die Front-End-Adresse ein, um auf das Front-End zuzugreifen. Erfolg. (Wenn das Front-End nicht auf das Back-End zugreifen kann, ist möglicherweise der Nignx-Reverse-Proxy ungültig. Bitte lesen Sie meinen anderen Artikel. Der Nginx-Reverse-Proxy ist ungültig und das Front-End kann ihn nicht abrufen Die Daten des Back-Ends. Die Front- und Back-Ends können keine Verbindung herstellen