Java 프런트엔드 분리 프로젝트 배포

1. 윈도우 환경 전개

프런트 엔드 배포

1. 먼저 프로젝트를 패키징합니다.

npm 실행 빌드;

2. nginx 구성

Vue 프로젝트의 진입점은 index.html이며 nginx 경로는 이 파일을 통과해야 하므로 nginx.conf 파일을 구성해야 합니다.

localhost를 찾아 try_files $uri $uri/ /index.html 코드 줄을 마지막에 추가합니다.

location / {
   root   html;
   try_files $uri $uri/ /index.html last;
   index  index.html index.htm;
}

3. nginx를 다시 시작합니다.

nginx.exe -s 재시작

백엔드 배포

1. 패키지 프로젝트

mvn clean package -Dmaven.test.skip=true

2. 프로젝트 시작하기

java -jar vueblog-0.0.1-SNAPSHOT.jar --spring.profiles.active=default

2. 리눅스 환경 전개

1. 프로덕션 환경에서 백엔드 프로젝트의 yml 구성

spring:
  datasource:
    type: com.alibaba.druid.pool.DruidDataSource
    driver-class-name: com.mysql.cj.jdbc.Driver
    url: jdbc:mysql://mysql:3306/simple_blog?&useSSL=false&serverTimezone=UTC&allowPublicKeyRetrieval=true
    username: root
    password: 123456

mybatis-plus:
  mapper-locations: classpath:/mapper/*.xml
#  configuration:
#    log-impl: org.apache.ibatis.logging.stdout.StdOutImpl

shiro-redis:
  enabled: true
  redis-manager:
    host: redis:6379

mysql, redis, back-end 프로젝트가 같은 네트워크 아래에 배치되어 있기 때문에 지정된 IP 주소 대신 배치의 이름을 사용할 수 있습니다.

2. 백엔드 프로젝트 패키징

mvn clean package -Dmaven.test.skip=true

3. Dockerfile을 작성하여 백엔드 이미지 빌드

FROM java:8
EXPOSE 8081
ADD simpleBlog-0.0.1-SNAPSHOT.jar app.jar
RUN bash -c 'touch /app.jar'
ENTRYPOINT ["java", "-jar", "app.jar", "--spring.profiles.active=pro"]

참고: 프로젝트의 타사 서비스가 다른 서비스에 배포된 경우 백엔드 프로젝트에서 지정된 주소만 구성하면 되며 나머지 단계는 모든 서비스가 서버의 동일한 Linux

4. docker-compose.yml 작성

version: "3"
services:
  nginx: 
    image: nginx:latest  
    ports:
    - 80:80  
    volumes: 
    - ./nginx/html:/usr/share/nginx/html
    - ./nginx/nginx.conf:/etc/nginx/nginx.conf
    privileged: true 
    image: mysql:8.0.29-oracle
    ports:
    - 3306:3306
    volumes:
      - ./mysql/data:/var/lib/mysql
      - ./mysql/config/my.cnf:/etc/my.cnf
    environment: 
      - MYSQL_ROOT_PASSWORD=123456
  redis:
    image: redis:latest
  vueblog:
    image: vueblog:latest
    build: . 
    ports:
    - 8081:8081

mysql과 nginx는 모두 데이터 볼륨을 사용하여 호스트 머신 외부에 마운트합니다. 그렇지 않으면 컨테이너가 시작될 때마다 마지막 데이터와 구성된 프런트 엔드 프로젝트가 손실됩니다.

nginx: 먼저 호스트에 html 폴더를 만든 다음 프런트 엔드 프로젝트에서 패키징한 dist 폴더의 모든 파일을 html 폴더에 넣은 다음 nginx.conf를 수정합니다.

mysql: 먼저 data 및 config 폴더를 생성한 다음 config 폴더에 my.cnf 파일을 생성합니다.

nginx.conf

#user  root;
worker_processes  1;
events {
  worker_connections  1024;
}
http {
  include       mime.types;
  default_type  application/octet-stream;
  sendfile        on;
  keepalive_timeout  65;
  server {
      listen       80;
      server_name  localhost;
      location / {
          root   /usr/share/nginx/html;
          try_files $uri $uri/ /index.html last; 
          index  index.html index.htm;
      }
      error_page   500 502 503 504  /50x.html;
      location = /50x.html {
          root   html;
      }
  }
}

my.cnf

[mysqld]
user=mysql
default-storage-engine=INNODB
character-set-server=utf8
[client]
default-character-set=utf8
[mysql]
default-character-set=utf8

5. 준비된 파일을 같은 디렉토리에 업로드

여기에 이미지 설명 삽입

6. 프로젝트 정렬 명령을 실행하면 아래 그림과 같은 내용이 나타납니다.

도커 작성 -d