docker安装vs docker安装vue

docker部署vue和springboot前后端分离保姆级教程

首先我这里的环境是阿里云服务器centos7，加域名解析配置

1.docker安装

第一件事当然是安装docker

1.1卸载原有docker

yum remove docker \
                  docker-client \
                  docker-client-latest \
                  docker-common \
                  docker-latest \
                  docker-latest-logrotate \
                  docker-logrotate \
                  docker-engine

1.2安装yum包和存储驱动

yum install -y yum-utils

1.3设置阿里云镜像仓库

这种当然是采用阿里云镜像加速包了，国外镜像比较慢，我这里就不给出了

yum-config-manager \
    --add-repo \
    https://mirrors.aliyun.com/docker-ce/linux/centos/docker-ce.repo

1.4安装docker

ce为社区版，而ee为企业版，这里采用社区版就够了

yum install docker-ce docker-ce-cli containerd.io

1.5启动docker

systemctl start docker

1.6查看docker版本

docker version

1.7配置阿里云镜像加速

由于后期拉取镜像都比较慢，所以这里配一个加速

sudo mkdir -p /etc/docker
sudo tee /etc/docker/daemon.json <<-'EOF'
{
  "registry-mirrors": ["https://xxx.mirror.aliyuncs.com"]
}
EOF
# 重启 Docker
sudo systemctl daemon-reload
sudo systemctl restart docker

1.8查看是否配置成功

docker info

2.mysql安装

2.1拉取mysql8.0版本

#docker pull为拉取镜像命令，后跟[服务名]:版本号,我比较喜欢用8.0版本，也可以写成5.7 docker pull mysql:8.0

2.2查看mysql镜像

docker images

2.3运行服务

docker run -d -p 3307:3306 --name mysql -v /mysqldata/mysql/log:/var/log/mysql  -v /mysqldata/mysql/data:/var/lib/mysql  -v /mysqldata/mysql/conf:/etc/mysql -e MYSQL_ROOT_PASSWORD=root   mysql:8.0

上述命令的含义： docker run:在docker中启动一个容器实例 -d:该容器在后台运行 -p 3307:3306：容器与主机映射端口为， 3306（主机端口，即外部连接mysql使用的端口号）: 3306（容器端口） --name mysql：容器运行后的名称 -v /mysqldata/mysql/log:/var/log/mysql：将容器/var/log/mysql目录下的数据，备份到主机的 /mysqldata/mysql/log目录下 -v /mysqldata/mysql/data:/var/lib/mysql：将容器/var/lib/mysql目录下的数据，备份到主机的 /mysqldata/mysql/data目录下 -v /mysqldata/mysql/conf:/etc/mysql：将容器/etc/mysql目录下的数据，备份到主机的 mysqldata/mysql/conf目录下 -e MYSQL_ROOT_PASSWORD=root：设置当前mysql实例的密码为root mysql:8.0:需要运行的容器名称以及版本号 由于我们自己服务器的3306端口经常被自己服务器自带的mysql服务占用，因而我们用3307作为mysql服务端口

2.4查看服务运行状态

#-a可加可不加，列出全部信息 docker ps -a

 

3.redis安装

3.1拉取redis

docker pull redis:5.0.3

3.2查看镜像

docker images

3.3运行redis

docker run -id --name=redis -p 6380:6379 redis:5.0.3

同样6379服务已经占用

3.4查看服务状态同mysql

docker ps -a

4.制作后端镜像

4.1后端打包介绍

首先我们用jar包进行部署，关于这个mysql和redis端口的问题，我们应该这样写入

1.采用服务器ip+对外暴露端口

2.采用容器ip+容器映射端口

这两种组合便可以连接上docker内部的redis以及mysql服务

4.2查看容器服务ip

docker inspect 服务名 #查看redis容器ip docker inspect redis #查看mysql容器ip docker inspect mysql #查看端口则依旧是拿redis举例子 docker ps -a | grep redis

4.3打jar包说明

<build>
        <plugins>
            <plugin>
                <groupId>org.springframework.boot</groupId>
                <artifactId>spring-boot-maven-plugin</artifactId>
                <configuration>
                    <!-- 指定该Main Class为全局的唯一入口 -->
                    <mainClass>cn.blog.BlogApplication</mainClass>
                    <layout>ZIP</layout>
                </configuration>
                <executions>
                    <execution>
                        <goals>
                            <!--可以把依赖的包都打包到生成的Jar包中-->
                            <goal>repackage</goal>
                        </goals>
                    </execution>
                </executions>
            </plugin>
        </plugins>
    </build>

点击maven

打包成功后右键点击主项目点击show in explorer

找到刚打好的jar包

先本地在cmd窗口用java -jar XXX.jar测试一下是否能运行成功

创建lbs目录（可以随便起）,创建一个nginx目录，便于后续存放docker中nginx配置以及前端打包好的文件

mkdir -p /lbs/nginx

将jar包上传至lbs文件夹下，有宝塔的可以直接拖拽上传

4.4制作dockerfile

vim Dockerfile

#jdk报错，别用
FROM openjdk:8
COPY wqmblog.jar /wqmblog.jar
CMD ["--server.port=8001"]
#对外暴露的端口
EXPOSE 8001
ENTRYPOINT ["java", "-jar", "/wqmblog.jar"]

我见有的教程采用了compose，但是我没用

4.5运行jar包

#一定要加.，代表在当前路径运行
docker build -t  wqmblog .
docker run -d --restart=always --name wqmblog -p 8001:8001 wqmblog

5.安装nginx

5.1直接拉取nginx

docker pull nginx

5.2配置nginx

# 创建 Nginx 容器，因为要拷贝一些文件以及设置挂载目录，需要先启动一个nginx容器，注意要把服务器自带的nginx删掉或停掉不要占用端口，方便域名配置
docker run -di --name nginx -p 80:80 nginx
# 将容器内的配置文件拷贝到宿主机新建的文件夹内，并重命名
docker cp nginx:/etc/nginx /lbs/nginx/conf
# 这时候就可以将当前的容器停掉、删除了
docker stop nginx
docker rm nginx
#建立前端存放的文件夹
cd /lbs/nginx/
mkdir front
#启动nginx配配置映射挂载路径
docker run -di --name mynginx -p 80:80 -v /lbs/nginx/conf:/etc/nginx -v /lbs/nginx/front:/usr/share/nginx/html --privileged=true -d nginx

/nginx/front：前端静态文件存放路径

/nginx/conf: nginx配置文件

域名解析，这里自己去购买一个域名，新人很便宜，解析一个www就行了，这个很简单，

然后将其配置在server_name上，同时也可以隐藏端口

user  nginx;
worker_processes  auto;

error_log  /var/log/nginx/error.log notice;
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"';

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

    sendfile        on;
    #tcp_nopush     on;

    keepalive_timeout  65;
    
    server {
        listen       80;
        server_name  localhost 域名;
        location / {
            root /usr/share/nginx/html/dist/;
                    index index.html;
                    try_files $uri $uri/ /index.html;
        }
        location /api/ {
            # 注意这里不能写 localhost 或 127.0.0.1，因为 Nginx 也是部署在 Docker 上的，且都是采用
            # 的默认的 Bridge 网络模式，每个启动的容器都有自己 ip，类似于 172.17.0.x。如果写 localhost 或 127.0.0.1 本地           # 回环地址，会报错 502 错误。
            # 综上：此处需要写宿主机的 ip:宿主机暴露出的端口（docker ps 可看）
            # 或者写容器内的 ip:后端服务在容器内的端口（docker network inspect bridge 或 docker inspect 容器ID|名称 均可看）
          proxy_pass http://xxxx:8001/;
                    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 Product_Type 2;
        }
    }

    #gzip  on;

    include /etc/nginx/conf.d/*.conf;
}

6.vue打包

直接npm run build,然后将dist文件上传至front文件夹下，如果有其他种比如生产环境以及开发环境的切换配置请私聊我