docker部署前后端项目

已于 2024-10-04 17:47:10 修改
阅读量964 收藏 28
点赞数 8
文章标签： docker 容器 nginx
于 2024-10-02 13:23:55 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_69265912/article/details/142679760
版权

docker部署前后端项目

学习docker部署前后端，记录步骤和报错

前置

云服务器、防火墙（防火墙关闭就不用）开放前后端端口，服务器中已有docker

防火墙相关命令：

关闭防火墙：systemctl stop firewalld

查询已开放的端口列表：firewall-cmd --zone=public --list-ports

查看想开的端口是否已开：firewall-cmd --query-port=123/tcp

添加指定需要开放的端口：firewall-cmd --add-port=123/tcp --permanent

重载入添加的端口：firewall-cmd --reload

查询指定端口是否开启成功：firewall-cmd --query-port=123/tcp

移除指定端口：firewall-cmd --permanent --remove-port=123/tcp

​

Docker 启动nginx 并部署前端项目

  1. 拉取nginx镜像：docker pull nginx
  2. 已对前端项目打包，可以先在idea中进行打包上传至服务器，也可以将项目上传至服务器(服务器中有npm)再打包，打包完成后会生成dist文件：
# 服务器前端打包
npm install --registry=http://registry.npmmirror.com
npm run build
  1. nginx配置文件挂载

创建/docker_data/nginx：mkdir -pv /docker_data/nginx
在nginx目录下创建log、conf、conf.d文件夹：mkdir log conf conf.d
dist文件复制到/docker_data/nginx/中：cp -r dist /docker_data/nginx/

  1. 先启动一次nginx(已有配置文件直接跳到第六步)
docker run -d -p 80:80 --name nginx nginx
  1. 复制nginx 的配置文件，并进行修改（已有配置文件直接下一步即可，不用操作这一步）

容器中相关位置：
  日志位置：/var/log/nginx/
  配置文件位置：/etc/nginx/
  项目位置：/usr/share/nginx/html

  配置文件复制：

docker cp nginx:/etc/nginx/nginx.conf /docker_data/nginx/conf/
docker cp nginx:/etc/nginx/conf.d /docker_data/nginx/conf.d/

  cd到对应目录：

cd /docker_data/nginx/conf/
cd /docker_data/nginx/conf.d/

  修改配置文件(我的配置文件在最后，可以参照修改)：

 vi nginx.conf
 vi default.conf
  1. 启动容器
# 7000是我的前端端口号
docker run --name nginx -d -p 7000:7000 -v /docker_data/nginx/conf/nginx.conf:/etc/nginx/nginx.conf:ro -v /docker_data/nginx/conf.d/default.conf:/etc/nginx/comf.d/default.conf:ro -v /docker_data/nginx/dist:/usr/share/nginx/html:rw -v /docker_data/nginx/log:/var/log/nginx nginx

部署中遇到的各种报错与解决

  1. 报错：没有启动成功
    查看日志：docker logs nginx
    原因： 配置文件出错，按照报错信息重新修改挂载文件，重启容器 docker restart nginx
  2. 报错：nginx刷新404
    解决：在配置文件中添加配置（主要在try_files上，其他是自带配置）
   location / {
       root /usr/share/nignx/html;
       index  index.html index.htm;
       try_files  $uri $uri/ /index.html; 
   }

docker打包jar项目

  1. 创建目录存放jar包、已解压的jdk文件
mkdir -pv /docker_data/jar
  1. 将后端jar包和jdk文件放在 /docker_data/jar目录中
  2. 在该目录中编辑Dockerfile文件，保存退出
cd /docker_data/jar
vi Dockerfile

  Dockerfile文件内容（根据自己需要更改，发现了占用更小的文件写法，文件内容在最后面）：

# 基础镜像
FROM centos:centos7.9.2009
# 创建镜像中存放上传文件的文件夹，设置工作路径
RUN mkdir -pv /mydata
WORKDIR /mydata
#复制jdk文件夹到新镜像的路径下，注意：COPY上传的是文件夹里的文件
COPY jdk1.8.0_181 ./jdk1.8.0_181
# 改名，顺便看看是否有该文件夹
RUN cd /mydata && mv jdk1.8.0_181 java8
# 设置环境变量
ENV JAVA_HOME=/mydata/java8
ENV CLASSPATH=.:$JAVA_HOME/jre/lib/rt.jar:$JAVA_HOME/lib/dt.jar:$JAVA_HOME/lib/tools.jar
ENV PATH=$PATH:$JAVA_HOME/bin
# 复制jar包
COPY app.jar ./app.jar
# 暴露端口
EXPOSE 19090
# 入口，jar文件的启动命令 # 这里app.jar就是我的jar文件
ENTRYPOINT ["java","-jar","app.jar"]
  1. 就在该目录下进行docker镜像构建
docker build -f Dockerfile -t myjar .
  1. 查看镜像
docker images

在这里插入图片描述

docker运行mysql容器和打包的jar容器

  1. 拉取mysql镜像
docker pull mysql:8.0.20
  1. 创建mysql挂载目录，存放数据和日志
mkdir -pv /docker_data/mysql/mysql
mkdir -pv /docker_data/mysql/log
  1. 运行mysql容器
docker run --name mysql -d -p 3306:3306 -e MYSQL_ROOT_PASSWORD=123456 -v /docker_data/mysql/mysql:/var/lib/mysql -v /docker_data/mysql/log:/var/log/mysql mysql:8.0.20
  1. 通过navicat远程连接，新建数据库并运行sql文件
  2. 运行myjar容器
# 19090是我的后端端口
docker run -d -p 19090:19090 --name myjar myjar
  1. 最后就可以通过ip:前端端口登录系统啦

部署中遇到的报错

  1. 报错：
    在这里插入图片描述

原因：主要是因为在启动docker容器的时候或做docker配置的时候，还对防火墙设置重新启动等配置，这样会清除docker的相关配置，导致在查询防火墙规则的时候显示不到docker的解决方式：

# 重启docker
systemctl restart docker
  1. 报错：navicat运行sql文件
    在这里插入图片描述
    原因：索引字段过长
    解决方法：在运行sql文件之前先对数据库进行查询操作
set global innodb_large_prefix=on;
set global innodb_file_per_table=on;
set global innodb_file_format=BARRACUDA;
set global innodb_file_format_max=BARRACUDA;

nginx相关配置文件

nginx.conf（根据自己需求修改）

# 80是项目前端端口
user  nginx;
worker_processes  1;

#error_log  logs/error.log;
#error_log  logs/error.log  notice;
#error_log  logs/error.log  info;

#pid        logs/nginx.pid;


events {
    worker_connections  1024;
}


http {
    include       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"';

    #access_log  logs/access.log  main;

    sendfile        on;
    #tcp_nopush     on;

    #keepalive_timeout  0;
    keepalive_timeout  65;

    #gzip  on;

    server {
        listen       80;
        server_name  localhost;

        #charset koi8-r;

        #access_log  logs/host.access.log  main;

        location / {
            root  /usr/share/nginx/html;
            #root  /data/cm_app/cm_vue;
            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 $proxy_add_x_forwarded_for;
            proxy_set_header REMOTE-HOST $remote_addr;
            proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
            proxy_pass http://ip:后端端口/;
        }

#error_page  404              /404.html;

        # redirect server error pages to the static page /50x.html
        #
        error_page   500 502 503 504  /50x.html;
        location = /50x.html {
            root   html;
        }

        # proxy the PHP scripts to Apache listening on 127.0.0.1:80
        #
        #location ~ \.php$ {
        #    proxy_pass   http://127.0.0.1;
        #}

        # pass the PHP scripts to FastCGI server listening on 127.0.0.1:9000
        #
        #location ~ \.php$ {
        #    root           html;
        #    fastcgi_pass   127.0.0.1:9000;
        #    fastcgi_index  index.php;
        #    fastcgi_param  SCRIPT_FILENAME  /scripts$fastcgi_script_name;
        #    include        fastcgi_params;
        #}

        # deny access to .htaccess files, if Apache's document root
        # concurs with nginx's one
        #
        #location ~ /\.ht {
        #    deny  all;
        #}
    }


    # another virtual host using mix of IP-, name-, and port-based configuration
    #
    #server {
    #    listen       8000;
    #    listen       somename:8080;
    #    server_name  somename  alias  another.alias;

    #    location / {
    #        root   html;
    #        index  index.html index.htm;
    #    }
    #}


    # HTTPS server
    #
    #server {
    #    listen       443 ssl;
    #    server_name  localhost;

    #    ssl_certificate      cert.pem;
    #    ssl_certificate_key  cert.key;

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

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

    #    location / {
    #        root   html;
    #        index  index.html index.htm;
    #    }
    #}

}

default.conf（根据自己需求修改）

# 80是项目前端端口
server {
    listen       80;
    listen  [::]:80;
    server_name  localhost;

    #charset koi8-r;
    #access_log  /var/log/nginx/host.access.log  main;

    location / {
        root   /usr/share/nginx/html;
        #root   /data/cm_app/cm_vue;
        index  index.html index.htm;
        try_files  $uri $uri/ /index.html;
    }

    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 $proxy_add_x_forwarded_for;
        proxy_set_header REMOTE-HOST $remote_addr;
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
        proxy_pass http://ip:后端端口/;
    }

    #error_page  404              /404.html;

    # redirect server error pages to the static page /50x.html
    #
    error_page   500 502 503 504  /50x.html;
    location = /50x.html {
        root   /usr/share/nginx/html;
    }

    # proxy the PHP scripts to Apache listening on 127.0.0.1:80
    #
    #location ~ \.php$ {
    #    proxy_pass   http://127.0.0.1;
    #}

    # pass the PHP scripts to FastCGI server listening on 127.0.0.1:9000
    #
    #location ~ \.php$ {
    #    root           html;
    #    fastcgi_pass   127.0.0.1:9000;
    #    fastcgi_index  index.php;
    #    fastcgi_param  SCRIPT_FILENAME  /scripts$fastcgi_script_name;
    #    include        fastcgi_params;
    #}

    # deny access to .htaccess files, if Apache's document root
    # concurs with nginx's one
    #
    #location ~ /\.ht {
    #    deny  all;
    #}
}

关于dockerfile

今天看到自己的myjar镜像占用的比较多，想看看有没有更小点的打包jar包方式，于是有了下面的结果
在这里插入图片描述
将基础镜像换成了openjdk:8
文件内容如下，和上面的文件内容相比少了很多行：

FROM openjdk:8
# 复制jar包
COPY app.jar /tmp/app.jar
# 暴露端口
EXPOSE 19090
# 入口，jar文件的启动命令
# 这里app.jar就是我的jar文件
ENTRYPOINT ["java","-jar","/tmp/app.jar"]

之后还是通过docker build就能够打包镜像了

 docker build -f dockerfile -t myjar_1 .
m0_69265912
关注
手把手通过Docker部署前后端分离项目（亲测可用）
黄团团的个人博客
08-21 7965
Docker基本安装和部署Nginx、MySQL、Vue和SpringBoot项目学习笔记（亲测可用），这里我用的是阿里云的服务器，环境是CentOS7！分享一些自己在学习路上的一些笔记，欢迎大家共同交流与探讨！
docker部署前后端分离项目
weixin_74454158的博客
03-06 663
2、我们用cd进入到conf文件夹里面放入配置文件,最终我们容器里面的redis的配置文件按照我们这个配置文件进行启动。1、和还上面的一样创建我们的mysql配置文件将我们的mysql配置文件丢到/data/mysql/conf的下面。2、使用命令将我们的防火墙进行一个关闭，这样的使我们能够进行一个外部访问，有利于我们查看MySQL的错误。3、当我们创建局域网的时候记得重启我们的docker,如果不重启的话我们在创建镜像的时候就会报错。1、创建一个局域网，将我们项目所需要的所有端口号都放在一个局域网下面。
三分钟学会使用 Docker 部署前端项目
weixin_42907150的博客
01-30 5607
Docker🐳 是一种容器技术，只隔离应用程序的运行时环境但容器之间可以共享同一个操作系统，可以理解成一个更轻量级的虚拟机并且使用的是本机的操作系统。Docker 变得越来越流行，它可以轻便灵活地隔离环境，进行扩容，运维管理。对于业务开发者而言，随着持续集成的发展，对代码质量及快速迭代的要求也越来越高。对于前端而言，在 CI 环境中使用也更容易集成开发，测试与部署。比如可以为流水线(Pipeline)设置等任务，更好地把控项目质量。
Docker部署前后端项目全流程
YooYee233的博客
07-05 1874
在当今的软件开发领域，容器化技术已经成为了部署和管理应用程序的重要手段。Docker作为容器化技术的代表，它通过轻量级、可移植的容器来简化应用的部署和运维过程。这篇文章主要是记录自己学习的过程，如有错误之处可以指出讨论修改。
Docker前后端项目部署（完整篇）
util123的博客
11-11 7252
本文详细讲解了如何使用 Docker 构建镜像并部署前后端项目，包括如何配置、编写 Dockerfile 和启动容器。在实践过程中，作者发现了一些常见问题，并提供了解决方案，例如如何解决无法连接数据库的问题、如何配置 nginx 代理等。本文将对想要深入了解 Docker 镜像部署前后端项目的读者提供帮助。此时你有一台服务器，首先安排上docker
docker 项目部署 后端/前端
zhangaob的博客
06-21 7456
这种一般是，build时候就有问题，Dockerfile 有问题。
Docker续2：docker部署前端项目
最新发布
m0_70848838的博客
08-26 1224
root@localhost ~]# ls //导入dist项目[root@localhost ~]# docker pull mysql //下载mysql[root@localhost ~]# docker images //查看镜像。
Docker部署前后端项目
qq_59239723的博客
04-11 1083
Docker Compose是Docker的一个工具，它允许用户使用YAML文件格式来配置应用程序的服务。这个配置文件通常命名为。
160张图详细讲解Docker部署前后端项目.docx
07-08
160张图详细讲解Docker部署前后端项目.docx160张图详细讲解Docker部署前后端项目.docx160张图详细讲解Docker部署前后端项目.docx160张图详细讲解Docker部署前后端项目.docx160张图详细讲解Docker部署前后端项目.docx...
使用Docker容器部署RuoYi-Vue前后端分离项目
06-20
此次部署项目是我亲身经历，而且是一次性部署成功，没有部署超过两次甚至多次的情况，过程虽然很艰难，但结果还是很满意的，我希望大家用心去部署这个项目，你会发现部署这个项目其实不难
Docker部署SpringBoot+Vue前后端分离项目
02-14
前后端项目和配置文件
Docker前后端部署(vue+jar/war)
qq_43324779的博客
03-13 3767
Docker部署前端 vue 后端 jar/war1 Docker部署jar1.1 将jar包上传到服务器指定目录1.2 在该目录下创建Dockerfile 文件1.3 Dockerfile文件添加代码from java:8maintainerADD demo-0.0.1-SNAPSHOT.jar demo.jardemo-0.0.1-SNAPSHOT.jardemo.jarexpose 8080entrypoint1.4 编辑好Dockerfile文件后，执行命令 构建镜像1.5 镜像构建成功后，运
Docker部署前端项目
weixin_44876263的博客
02-29 2206
Docker 是一个用于开发、交付和运行应用程序的开源平台。它利用容器技术，只隔离应用程序的运行时环境但容器之间可以共享同一个操作系统，可以将应用程序及其依赖项打包到一个可移植的容器中，然后发布到任何支持 Docker 的环境中运行，无论是开发人员的个人笔记本电脑、数据中心的虚拟机，还是云服务提供商的主机上。可以理解成一个更轻量级的 虚拟机 并且使用的是本机的操作系统。容器(Container)：容器是一个轻量级、独立、可执行的软件包，包含应用程序及其所有依赖项（如代码、运行时、系统工具、库等）。
使用Docker部署前端项目实战教程，该踩的坑我都帮你踩了！
热门推荐
纸飞机博客
08-28 2万+
每个人的前半生，都在不停地做加法。可到了后半生，我们就要学会不断地做减法。 目录 前置工作 1、需要准备的东西 2、连接云服务器 安装Docker环境 1、安装Docker的依赖库。 2、添加Docker CE的软件源信息。 3、安装Docker CE。 4、启动Docker服务。 准备Dockerfile并部署项目（构建新的业务镜像） 1、准备nginx.conf.template、Dockerfile、dist（前端项目build后的包） 2、部署项目 知识点（需要...
Docker部署前后端分离项目的三种方式
qq_44406232的博客
06-15 5298
前后端打包成一个镜像，并做反向代理
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值