SpringBoot + Vue 项目 后端前端部署Linux docker环境部署

1. 后端和环境部署

1.1 后端docker配置

编写Dockerfile文件

# 基础镜像
FROM eclipse-temurin:8
# 作者
MAINTAINER maqiang
# 工作目录
WORKDIR /usr/local/java
# 同步docker内部的时间
RUN ln -snf /usr/share/zoneinfo/$TZ /etc/localtime && echo $TZ > /etc/timezone
# 设置时区
ENV TZ=Asia/Shanghai
EXPOSE 8189
# 复制jar包到/user/local/java下
ARG JAR_FILE
ADD ${JAR_FILE} ./fileSys.jar

ENTRYPOINT ["nohup","java","-Dspring.profiles.active=online","-Dspring.config.location=/usr/local/java/application.yml,/usr/local/java/application-online.yml","-jar","/usr/local/java/fileSys.jar",">","/usr/local/java/fileSys.log","&>","&"]

打开目录

cd /usr/local/

创建目录

mkdir java

进入 java文件

cd /usr/local/java

上传jar包以及Dockerfile

1.2 Java Maven 打包 后生成jar包

在启动类的pom.xml中添加下面代码后进行打包，再取出jar包放到Linunx /usr/local/java 目录下

    <build>
        <finalName>Dockerfile设置的名字</finalName>
        <plugins>
            <plugin>
                <!--该插件主要用途：构建可执行的JAR -->
                <groupId>org.springframework.boot</groupId>
                <artifactId>spring-boot-maven-plugin</artifactId>
                <version>2.0.1.RELEASE</version>
                <executions>
                    <execution>
                        <goals>
                            <goal>repackage</goal>
                        </goals>
                    </execution>
                </executions>
            </plugin>
        </plugins>
    </build>

1.3 开始部署

构建docker 镜像命令

# -t 标签
# file_sys 镜像名称名字
# 1 . 意思是版本1，相对路径指定Dockerfile位置在哪 . 当前目录
docker build -t file_sys:1 .

提示 不要有大小，可以学我变换一下

若你像在配置文件中不写ip ，就写个名字就能实现原来的效果需要创建网络

spring:

  datasource:
    driver-class-name: com.mysql.jdbc.Driver
    url: jdbc:mysql://mysql/数据库名?

docker network create file_sys

运行java 镜像

docker run -d -it --name file_sys --network file_sys -v /usr/local/java:/usr/local/java -v /usr/local/java/fonts:/opt/java/openjdk/jre/lib/fonts -v /usr/local/java/fonts:/usr/share/fonts/truetype/dejavu -p 8189:8189 file_sys:1

校验是否运行正常

运行完后会生产一个nohup.out 文件，查看 /usr/local/java/nohup.out 文件看是否运行成功

cat nohup.out

可以在postman或者浏览器测试一下接口是否正常

2. 前端部署

打包vue ,生成dist文件

npm run build

在Linux创建目录存放nginx。/usr/local 下创建 nginx

mkdir nginx

进入目录再创建 html nginx.conf https 三个文件与文件夹

mkdir html
mkdir https

nginx.conf 内容，复杂到/usr/local/nginx

#user  nobody;
worker_processes  1;

events {
    worker_connections  1024;
}


http {
    include       mime.types;
    default_type  application/octet-stream;

    sendfile        on;
    #tcp_nopush     on;

    keepalive_timeout  65;

    #gzip  on;



   # http server
    server {
        listen       80;
        server_name 自己服务器的IP地址;

        location / {
            root   /usr/share/nginx/html/dist;
            index  index.html index.htm;
            # 解决history路由模式刷新404
            try_files $uri $uri/ /index.html;
           
        }

	 #location /api {  
             #proxy_pass http://自己服务器的IP地址:8189; 
	   
         #}
        location ^~ /api/ {
            proxy_pass   http://自己服务器的IP地址:8189/;
        }        

        error_page   500 502 503 504  /50x.html;
        location = /50x.html {
            root   html;
        }
    }


    # HTTPS server



}

把dist 放到 /usr/local/nginx/html

运行nginx容器

docker run -d --name nginx --network file_sys -v /usr/local/nginx/html:/usr/share/nginx/html -v /usr/local/nginx/nginx.conf:/etc/nginx/nginx.conf -v /usr/local/nginx/https:/usr/share/nginx/https -p 80:80 -p 443:443 nginx:latest

在浏览器测试是否可以返回后端接口

3. 扩展

购买域名

假如购买的域名为 jiaxinxiaobinggan.com

注册ssl证书

下载nginx的证书，把证书放到 /usr/share/nginx中

ICP备案

只有备案了才能用过域名访问

修改nginx.conf 内容，复制到/usr/local/nginx

#user  nobody;
worker_processes  1;

events {
    worker_connections  1024;
}


http {
    include       mime.types;
    default_type  application/octet-stream;

    sendfile        on;
    #tcp_nopush     on;

    keepalive_timeout  65;

    #gzip  on;



   # http server
    server {
        listen       80;
        server_name 自己服务器的IP地址;

        location / {
            root   /usr/share/nginx/html/dist;
            index  index.html index.htm;
            # 解决history路由模式刷新404
            try_files $uri $uri/ /index.html;
           
        }

	 #location /api {  
             #proxy_pass http://自己服务器的IP地址:8189; 
	   
         #}
        location ^~ /api/ {
            proxy_pass   http://自己服务器的IP地址:8189/;
        }        

        error_page   500 502 503 504  /50x.html;
        location = /50x.html {
            root   html;
        }
    }


      # HTTPS server

    server {
       listen       443 ssl;
       server_name  注册的域名名称;

        ssl_certificate     /usr/share/nginx/https/下载ssl证书.vip.pem;
        ssl_certificate_key  /usr/share/nginx/https/下载ssl证书.vip.key;

        ssl_session_cache    shared:SSL:1m;
        ssl_session_timeout  5m;

        ssl_ciphers  HIGH:!aNULL:!MD5;
        ssl_prefer_server_ciphers  on;

        location / {
            root   /usr/share/nginx/html/dist;
            index  index.html index.htm;
            # 解决history路由模式刷新404
            try_files $uri $uri/ /index.html;
           
        }
        location ^~ /api/ {
            proxy_pass   http://自己服务器的IP地址:8189/;
        } 
	    error_page   500 502 503 504  /50x.html;
        location = /50x.html {
            root   html;
        }

    }



}

      # 解决history路由模式刷新404
        try_files $uri $uri/ /index.html;
       
    }
    location ^~ /api/ {
        proxy_pass   http://自己服务器的IP地址:8189/;
    } 
    error_page   500 502 503 504  /50x.html;
    location = /50x.html {
        root   html;
    }

}

}

``本项目最后遇到的文件与解决方案https://blog.csdn.net/JiaXinBinGan/article/details/137750870?spm=1001.2014.3001.5502