docker将Java、vue、nginx打进镜像（涉及容器打成镜像）

于 2024-07-15 17:15:41 发布
阅读量206 收藏 4
点赞数 3
文章标签： docker java vue.js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_37752382/article/details/140437551
版权

一、背景

一个项目更新需要打成镜像包发布。

docker+springboot.jar+vue静态文件+nginx

本文不讲安装docker,安装好安装，镜像源稍微麻烦点

二、操作

抄作业原文 传送门
按照上文拉取centos7，然后将需要的东西直接打进脚本，这样最简单，但是在拉取过程中，初始镜像contos7安装nginx需要安装一些工具包，拉取的时候报错了，原因还是在镜像源上，并且还想在上面装一些工具，另外创建容器不应该在里面做很多初始化的东西，每次更新业务包就行，为了解耦，所以先自己定制一个操作系统镜像，然后再创建应用。

1、创建初始镜像

1）生成镜像并创建容器

#  docker images 一下，看看有没有镜像，没有的话拉一个，一般都有
docker pull centos:7
# 创建一个容器 eeb6ee3f44bd镜像id
 docker run -itd eeb6ee3f44bd
 # 查看下
 docker ps -a
 # 进入到容器里，安装自己想装的东西
docker exec -it 356f118b8866 /bin/bash

2）安装一些定制的东西

# 拉取的镜像执行这个  才能安装gcc  要不报错
curl -o /etc/yum.repos.d/CentOS-Base.repo http://mirrors.aliyun.com/repo/Centos-7.repo
# 安装这些依赖  必须安装 安装nginx会用到
yum -y install gcc zlib zlib-devel pcre-devel openssl openssl-devel
# 再装个网络工具，以便于后面查看端口
yum install net-tools
yum -y install telnet-server

3）将此容器打成镜像

# 前两个参数是作者和描述   后买两个参数一个是容器id 一个是镜像名称和tag
sudo docker commit -a "test" -m "create new img" 2633c8af37b4 centos:v1
# 查看多了一个镜像
docker images

2、安装业务应用

mkdir -p /data/testa

准备下列文件，web是vue打出来的静态文件，其他文件一眼能看出来

-rw-r--r--. 1 root root      2519 Jul 15 00:18 Dockerfile
-rw-r--r--. 1 root root 185515842 Jul 15 00:18 jdk-8u144-linux-x64.tar.gz
-rw-r--r--. 1 root root   1062124 Jul 15 00:18 nginx-1.20.2.tar.gz
-rw-r--r--. 1 root root      2626 Jul 15 00:18 nginx.conf
-rw-r--r--. 1 root root 216162708 Jul 15 00:18 project-service-v1.0.65.gjj.2-springboot.jar
-rw-r--r--. 1 root root       647 Jul 15 00:18 run.sh
drwxr-xr-x. 7 root root       125 Jul 15 00:19 web

1）创建 nginx.conf

# For more information on configuration, see:
#   * Official English Documentation: http://nginx.org/en/docs/
#   * Official Russian Documentation: http://nginx.org/ru/docs/

# user nginx;
worker_processes auto;
error_log /usr/local/nginx/logs/error.log;
pid /run/nginx.pid;

# Load dynamic modules. See /usr/share/doc/nginx/README.dynamic.
include /usr/share/nginx/modules/*.conf;

events {
    worker_connections 1024;
}

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

    #access_log  /var/log/nginx/access.log  main;

    sendfile            on;
    tcp_nopush          on;
    tcp_nodelay         on;
    keepalive_timeout   65;
    types_hash_max_size 2048;
    client_max_body_size 100m;
    include             /usr/local/nginx/conf/mime.types;
    default_type        application/octet-stream;

    # Load modular configuration files from the /etc/nginx/conf.d directory.
    # See http://nginx.org/en/docs/ngx_core_module.html#include
    # for more information.
    include /etc/nginx/conf.d/*.conf;

    server {
        listen       80 default_server;
        listen       [::]:80 default_server;
        server_name  _;
        root         /usr/share/nginx/html/public;

        # Load configuration files for the default server block.
        include /etc/nginx/default.d/*.conf;

        location / {
        index index.php  index.html index.htm;
        }

        error_page 404 /404.html;
            location = /40x.html {
        }

        error_page 500 502 503 504 /50x.html;
            location = /50x.html {
        }
      
        location ~ \.php$ {
        fastcgi_pass 127.0.0.1:9000;
        fastcgi_param SCRIPT_FILENAME $document_root$fastcgi_script_name;
        include  fastcgi_params;
        }
    }
    server {
        listen       8088;
        server_name  localhost;

        location / {
            root   /usr/local/project/web;
	    try_files $uri $uri/ /index.html;
            index  index.html index.htm;
        }

        location /prod-api/{
                proxy_set_header Host $http_host;
                proxy_set_header X-Real-IP $remote_addr;
                proxy_set_header REMOTE-HOST $remote_addr;
                proxy_set_header X-Forwarded-For $remote_addr;
                proxy_pass http://localhost:8080/; #设置监控后端启动的端口
        }

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

2）生成Dockerfile

FROM centos:v1

# 描述作者和邮箱,可只写其中一个,也可二个都写
MAINTAINER test

# 时区与字符设置UTF-8并配置环境
ENV TZ=Asia/Shanghai
ENV LANG=C.UTF-8

# 在容器里面创建一个java目录,用来放拷贝过来的文件,RUN用来执行linux命令
RUN mkdir /usr/local/java
# 在容器内创建一个project目录和子目录web,用来存放后端jar包和前端打包好的静态页面
RUN mkdir -p /usr/local/project/web
# 把jdk-8u144-linux-x64.tar.gz添加到容器中,文件必须要和你的Dockerfile在同一级目录里面,ADD命令会自动将.gz文件拷贝到容器里面并自动解压
ADD jdk-8u144-linux-x64.tar.gz /usr/local/java/
# 配置java环境变量
ENV JAVA_HOME /usr/local/java/jdk1.8.0_144
ENV JRE_HOME $JAVA_HOME/jre
ENV CLASSPATH $JAVA_HOME/lib/dt.jar:$JAVA_HOME/lib/tools.jar:$JRE_HOME/lib:$CLASSPATH
ENV PATH $JAVA_HOME/bin:$PATH

#将后端jar包复制到容器里面的project
COPY project-service-v1.0.65.gjj.2-springboot.jar /usr/local/project
#将前端打包好的静态文件复制到容器里面的5gsignplay-web目录下面,COPY复制不了文件本身,只能复制文件里面的内容,所以要提前在容器里面创建一个前端目录
COPY web /usr/local/project/web

#配置nginx,将nginx搬到容器里面自动解压
ADD nginx-1.20.2.tar.gz /usr/local/java/
#进入/usr/local/java/nginx-1.20.2目录进行安装和编译
WORKDIR /usr/local/java/nginx-1.20.2
#安装nginx的四个依赖 
# RUN yum -y install gcc zlib zlib-devel pcre-devel openssl openssl-devel
#配置环境,考虑到后续安装ssl证书 添加两个模块
RUN ./configure --with-http_stub_status_module --with-http_ssl_module
#make编译,make install安装,make && makeinstall的意思就是执行make如果没有发生错误就执行make install
RUN make && make install
#将nginx.conf拷贝到容器里面nginx安装后的目录,make install安装成功后,/usr/local下面会多出一个nginx目录,所以这里需要将nginx.conf拷贝到/usr/local/nginx文件目录里面
COPY nginx.conf /usr/local/nginx/conf/nginx.conf

#将启动脚本拷贝到容器里面的/usr/local/project下面
COPY run.sh /usr/local/project
#给run.sh可执行权限
RUN chmod 777 /usr/local/project/run.sh

#对外暴露80,8880端口,暴不暴露端口没有什么影响,重要的是要在启动的时候使用-p映射宿主机端口:容器端口,暴露端口你也得使用-p映射端口
#EXPOSE 80 8880

#通过脚本同时启动后端jar包和nginx
CMD ["sh","/usr/local/project/run.sh"]

3）创建run.sh

#!/bin/bash
# 启动nginx服务
/usr/local/nginx/sbin/nginx -c /usr/local/nginx/conf/nginx.conf
 
#启动后端jar包,日志打印不额外存储
nohup java -Xms1024m -Xmx1024m -Xss5120k -XX:+UseG1GC -XX:G1HeapRegionSize=8M -XX:ParallelGCThreads=13 -XX:ConcGCThreads=8 -XX:InitiatingHeapOccupancyPercent=70 -jar /usr/local/project/project-service-v1.0.65.gjj.2-springboot.jar >>nohup.out 2>&1 &

#使这个脚本一直处于运行状态,如果不这样,当这个脚本命令执行结束后,docker容器会立即停止运行,所以这里需要让这个脚本一直运行,使docker容器一直处于运行状态
while [[ true ]];do
  sleep 1
done

4）准备文件完成后执行下面的就行（如果配置文件不对，比如nginx的配置等先进入镜像手动调整好，没问题了，再删除掉容器和镜像重新制作镜像即可）

# 生成镜像
docker build -t gjj .
# 查看镜像
docker images
# 创建容器  可以加多个-p  这个就是端口的一个映射   gjj第一个是容器的名字  第二个人是镜像像
docker run -d  -p 8088:8088 --name gjj gjj
# 查看容器
docker ps -a
# 进入到容器 可以看看应用都起来没
docker exec -it 6d0ba39493fc /bin/bash
# 删除容器先停止 后删除
docker stop 6d0ba39493fc
docker rm 6d0ba39493fc
大音~希声
关注
  • 3
    点赞
  • 踩
  • 4
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
【Docker】Vue项目基于Nginx打包成镜像并生成容器
源林氏的笔记本
08-30 4047
确保docker环境正常运行，不论是远程的还是本地的 确保vue项目能正常运行 将vue项目编译 编写Dockerfile文件 使用docker build命令生成镜像 使用docker run命令生成容器
【Docker】docker镜像+nginx部署vue项目:
SunPeng的博客
08-07 998
【Docker】docker镜像+nginx部署vue项目:
docker 启动Nginx镜像部署Vue项目
liubangbo的专栏
11-04 1349
阐述了直接启动Nginx进程来部署vue项目，这篇文章阐述采用docker 启动Nginx镜像来部署vue项目。可以看到Nginx镜像已成功启动，在浏览器地址栏输入IP+port 出现Nginx欢迎页。再次在浏览器输入IP+端口号会出现vue部署的项目，记得清除一下缓存。记得把之前启动的镜像(Nginx欢迎页那个镜像)删除掉。3. 制作docker 本地镜像，并启动。3) 构建Nginx镜像，并启动。1. docker 启动Nginx镜像。可以看到Nginx镜像已经成功拉取。
VUE 项目用 Docker+Nginx进行打包部署
CC酱写前端的博客
06-18 1138
这个文件将被 Nginx 加载以配置网站的行为，例如设置代理、重定向等。这意味着当你访问 Nginx 服务器时，这些静态文件将被提供给客户端。命令重新启动它，这次使用正确的端口映射。端口，你需要确保 Docker 容器的端口映射也相应地设置为。：指定基础镜像，这里使用的是 Nginx 的官方镜像，标签为。目录中的所有文件复制到 Nginx 的默认网页根目录。： 首先，你需要找到容器的 ID 或名称。命令加上容器的 ID 或名称来停止容器。这将覆盖默认的 Nginx 配置。命令列出所有正在运行的容器。
Docker镜像+nginx 部署 vue 项目的方法
01-09
一、打包vue项目 　在开发完的vue项目输入如下命名，打包生成dist文件夹 yarn build / npm run build 　此时根目录会多出一个...　即可以获取到nginx镜像。 　Docker镜像是一个特殊的文件系统，除了提供容器运行时
Docker结合Jenkins部署vue项目
01-20
Docker结合Jenkins部署vue项目 接上篇 Vue项目没什么好说的，在本地一般使用vue ui启动vue管理的前端，然后在里面进行启动 Vue官方说可以不通过ngin来部署，但是如果上生产环境，建议还是要走nginx 安装nginx 这里...
docker+daocloud实现前端项目自动构建部署
01-10
通过docker拉取nginx镜像，命令docker pull nginx 通过vue-cli初始化一个项目 可以通过vue init webpack 项目名称初始化一个项目，这里假设项目名称是docker-vue，然后在该项目的根目录新建一个Dockerfile文件，大致...
java后端源码部署-paas:基于Docker容器的PaaS平台，提供容器、镜像、集群、监控等服务
06-05
java后端源码部署 无道云平台 基于Docker容器的PaaS系统 一、系统架构 二、相关技术 2.1 前端技术 Vue Element-UI Echarts 2.2 后端技术 SpringBoot Spring Security JWT ActiveMQ Redis MySQL MyBatis Plus ...
SpringBoot+Vue前后端分离外卖点单系统.zip
12-26
至于部署方面，项目可能采用Docker容器化技术，通过Dockerfile定义运行环境，将应用打包成镜像，便于在各种环境中快速部署。Nginx作为反向代理服务器，可以将用户的请求分发到相应的服务，提高系统的可扩展性和负载...
Docker初识及使用研究
周陽讀書
07-10 787
记录自己使用docker一点一滴。
Docker Push Docker Hub
w13511069150的博客
07-11 433
首先可以参考 Docker | 将自己的docker镜像推送到docker hub[图文详情]_如何将自己的docker镜像上传到dockerhub上-CSDN博客 将自己的镜像打标签 和 镜像推送到 docker hub上的图文注意一下1.打标签之前 docker tag paddleocr_fast_api:1.0 hmgx/wlx:3.02.打标签之后3.开始推送docker push hmgx/wlx:3.0 4.推送完成就可以在 docker hub上查看到了。
【运维】docker批量删除临时镜像（两种方式）
飞的博客
07-10 1227
构建镜像的时候，同一个版本经常会使用相同tag，频繁打包一段时间后，本地会出现很多。的临时镜像，这时可以通过如下命令来批量删除。在开发的时候，需要经常发布开发包，在使用。
Linux 安装 Docker Compose
m0_63004677的博客
07-12 308
Linux 系统安装 Docker Compose
Docker基本管理
最新发布
Decp_的博客
07-14 472
是一个开源的应用容器引擎，基于go语言开发并遵循了apache2.0协议开源是在Linux容器里运行应用的开源工具是一种轻量级的“虚拟机”Docker的容器技术可以在一台主机上轻松为任何应用创建一个轻量级的、可移植的、自给自足的容器。
docker笔记1
计算机小白的奋起
07-09 896
docker学习笔记
Docker-compse的应用
m0_58310590的博客
07-09 1374
使用了docker 面临一个比较大的问题，如果一个djagno项目，使用mysql，redis，不要一次性把所有服务都放到一个容器中，每个服务一个容器，批量的管理多个容器，比较难以操作，于是有了docker-compose​# 不要把多个服务放到一个容器中(能，不建议)--》docker建议就是一个服务一个容器​​# 批量管理，操作docker容器的软件---》docker-compose--》go语言编写的只在单机上操作容器的软件。
TongRDS 2214 docker版指引（by lqw ）
weixin_39938069的博客
07-10 957
部署docker版本，建议先参考TongRDS2214手动部署版指引（by lqw+sy）在本地手动部署了一套适合业务场景的rds 服务后，再通过dockerfile 打镜像。
【Docker】镜像构建和容器部署
做点有意思的事情
07-11 350
【Docker】镜像构建和容器部署
docker nginx部署vue项目
06-28
### 回答1： 要将 Vue 项目部署在 Docker 上，可以使用以下步骤： 1. 编写 Dockerfile 文件：创建一个包含 Nginx 的 Docker 镜像，并将 Vue 项目文件复制到镜像中。 2. 构建 Docker 镜像：使用 Dockerfile 构建 Docker 镜像，例如可以使用命令：`docker build -t my-nginx-vue-image .` 3. 运行 Docker 容器：使用刚刚构建的 Docker 镜像来创建和运行一个 Docker 容器，例如可以使用命令：`docker run -d -p 80:80 my-nginx-vue-image` 4. 访问 Vue 项目：现在可以通过浏览器访问 Vue 项目，例如可以在浏览器中输入 `http://localhost` 来访问项目。 这样，您就可以在 Docker 中部署 Vue 项目了。 ### 回答2： 在将Vue项目部署到生产环境中，我们需要将Vue项目打包为静态资源，然后将静态资源放置到Web服务器上。在这里，我们介绍如何使用Docker和Nginx将Vue项目部署到Web服务器中。 第一步，将Vue项目打包为静态资源。我们可以使用Vue CLI提供的打包命令将Vue项目打包为生产版本。在终端中运行命令： ``` npm run build ``` 执行该命令后，Vue项目会将打包好的静态文件放置到dist目录下。 第二步，创建Docker文件。我们需要编写一个Dockerfile文件，并定义好环境变量和Docker镜像的基础镜像。在这里我们以Node.js作为基础镜像，Dockerfile文件的内容如下： ``` # 使用node.js基础镜像 FROM node:14.15.0-alpine3.10 as builder # 设置工作目录 WORKDIR /app # 复制package.json及package-lock.json到工作目录 COPY package*.json ./ # 安装依赖 RUN npm install # 将源码复制到工作目录 COPY . . # 进行构建 RUN npm run build # 运行时镜像的基础镜像 FROM nginx:1.19.6-alpine # 复制构建出的静态资源到镜像中 COPY --from=builder /app/dist /usr/share/nginx/html # 复制Nginx配置文件 COPY nginx.conf /etc/nginx/nginx.conf # 暴露80端口 EXPOSE 80 ``` 第三步，编写Nginx配置文件。我们需要将Nginx配置文件复制到Docker镜像中，如下所示： ``` # nginx.conf # 在http下添加gzip配置 http { gzip on; gzip_types text/plain text/css application/json application/javascript text/xml application/xml application/xml+rss text/javascript; server { listen 80; server_name localhost; # 静态资源文件所在目录 root /usr/share/nginx/html; # 让Nginx支持Vue路由 location / { try_files $uri $uri/ /index.html; } } } ``` 第四步，构建Docker镜像。我们需要在终端中运行构建镜像的命令。在终端中进入Dockerfile所在的目录，并执行以下命令： ``` docker build -t my-vue-app:latest . ``` 命令中，“my-vue-app”是镜像的名称，“latest”是镜像的标签。如果构建成功，会在镜像列表中看到该镜像。 第五步，启动Docker容器。我们需要运行以下命令将镜像启动为Docker容器： ``` docker run --name my-vue-app -d -p 80:80 my-vue-app:latest ``` 命令中，“my-vue-app”是容器的名称，“-d”表示在后台运行，“-p 80:80”表示将容器的80端口映射到主机的80端口。如果成功运行容器，可以在浏览器中访问Vue项目。 ### 回答3： Docker 是一个强大的容器化工具，而 Nginx 是一个流行的跨平台 Web 服务器软件，可以很好地与 Docker 结合使用以部署 Vue 项目。 以下是一些步骤来完成这个过程： 1. 第一步是创建 Vue 项目。在根目录下创建一个 Dockerfile 文件，并在其中添加以下代码： ``` # 使用了一个 Node.js 镜像，以安装项目的依赖 FROM node:latest as build-stage WORKDIR /app COPY package*.json ./ RUN npm install COPY ./ . RUN npm run build # 使用了一个 nginx 镜像，替换默认的 nginx.conf 文件，以及项目的 build 文件夹 FROM nginx:latest COPY --from=build-stage /app/dist/ /usr/share/nginx/html COPY nginx.conf /etc/nginx/nginx.conf ``` 2. 在项目根目录下添加 nginx.conf 文件并进行配置。例如： ``` user nginx; worker_processes auto; error_log /var/log/nginx/error.log; pid /var/run/nginx.pid; events { worker_connections 1024; } http { # 后端服务接口地址 upstream backend { server backend:80; } include /etc/nginx/mime.types; default_type application/octet-stream; sendfile on; keepalive_timeout 65; server { listen 80; location / { root /usr/share/nginx/html; index index.html; try_files $uri $uri/ /index.html; } # 反向代理 location /api { rewrite /api/(.*) /$1 break; proxy_pass http://backend; proxy_set_header Host $host; proxy_set_header X-Real-IP $remote_addr; proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for; proxy_set_header X-Forwarded-Proto $scheme; } } } ``` 3. 接下来，通过 Docker 命令构建镜像并运行容器： ``` // 构建镜像 docker build -t vue-nginx . // 运行容器 docker run -it -p 80:80 --rm --name vue-nginx-container vue-nginx ``` 到此为止，Vue 项目就已经成功部署到 Docker 容器中并通过 Nginx 服务器运行了。 总的来说，使用 Docker 和 Nginx 部署 Vue 项目可以大大简化部署流程，并提供更好的容错能力和安全性。在实践中，这种部署方式已被广泛采用。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值