docker構(gòu)建vue3前端項目

前端是基于vue3開發(fā)typescript項目，打包之后將生成的dist靜態(tài)資源放到我們準(zhǔn)備好的目錄下，然后在這個目錄下創(chuàng)建一個Dockerfile文件和nginx.conf配置文件，做如下配置：

FROM nginx:1.24.0

WORKDIR /usr/share/nginx/html

COPY dist  /usr/share/nginx/html/

COPY nginx.conf /etc/nginx/nginx.conf

EXPOSE 8081

# CMD ["nginx", "-g", "daemon off;"]

注意：nginx:1.24.0鏡像是我提前準(zhǔn)備好的鏡像，直接從倉庫拉取，你也可以使用你自己的鏡像，另外nginx.conf配置文件可以參考我寫一份如下：

user  nginx;
worker_processes auto;
pid   /var/run/nginx.pid;

events {
    worker_connections  1024;
}

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

    log_format  main  '$remote_addr - $remote_user [$time_local] "$request" '
                      '$status $body_bytes_sent "$http_referer" '
                      '"$http_user_agent" "$http_x_forwarded_for"';

    sendfile        on;
    #tcp_nopush     on;

    #keepalive_timeout  0;
    keepalive_timeout  65;

    #gzip  on; gzip啟用壓縮，html/js/css壓縮后傳輸會更快


 server {
    listen       8081;
    server_name  localhost;

    location / {
        root   /usr/share/nginx/html;
        index  index.html index.hmt;

        proxy_set_header host $host;
        proxy_set_header X-forwarded-for $proxy_add_x_forwarded_for;
        proxy_set_header X-real-ip $remote_addr;
    }
 }
}

準(zhǔn)備好了以上文件3個文件(或文件夾)之后，我們在當(dāng)前目錄執(zhí)行如下命令來構(gòu)建我們的前端項目鏡像：

docker build -t fot_web:1.0 .

構(gòu)建好我們的前端項目鏡像之后，再執(zhí)行如下命令來創(chuàng)建我們的容器：

docker run --name x_fot_web -p 8081:8081 -d fot_web:1.0

然后瀏覽器輸入我們的IP地址+端口，發(fā)現(xiàn)成功了。

image.png

docker構(gòu)建java后端項目

后端是基于springboot開發(fā)的java項目，打包之后將生成的service.jar打包文件放到我們準(zhǔn)備好的目錄下，然后在這個目錄下創(chuàng)建一個Dockerfile文件并做如下配置：

FROM openjdk:8-jdk-alpine
ENV TZ=Asia/Shanghai
RUN ln -snf /usr/share/zoneinfo/$TZ /etc/localtime && echo $TZ > /etc/timezone
COPY service.jar /app.jar
ENTRYPOINT ["java", "-jar", "/app.jar"]

注意：openjdk:8-jdk-alpine鏡像是我提前準(zhǔn)備好的鏡像，直接從倉庫拉取，你也可以使用你自己的鏡像。

準(zhǔn)備好了以上文件2個文件之后，我們在當(dāng)前目錄執(zhí)行如下命令來構(gòu)建我們的后端項目鏡像：

docker build -t fot_server:1.0 .

構(gòu)建好我們的后端項目鏡像之后，再執(zhí)行如下命令來創(chuàng)建我們的容器：

docker run -d --name x_fot_server -p 8090:8090 fot_server:1.0

然后查看日志 docker logs -f x_fot_server 已經(jīng)部署成功，不放心的話，依然可以使用瀏覽器輸入我們的IP地址+端口，發(fā)現(xiàn)成功了。

20240621231710.jpg