Docker学习3《docker安装redis、安装nginx、docker部署vue项目》

Dear 丶 2022-12-25 11:57 328阅读 0赞

### 目录 ###

*  一、docker安装redis
 *   *  1、下载redis镜像
     *  2、在本地服务器创建conf和data目录
     *  3、进去conf目录，传输修改好了的redis.conf文件
     *  4、关闭防火墙
     *  5、启动redis镜像
     *  6、查看容器
 *  二、docker安装nginx
 *   *  1、下载nginx
     *  2、启动nginx
     *  3、关闭防火墙
     *  4、查看启动的docker容器并测试
 *  三 、nginx部署vue项目,映射本地目录到nginx容器
 *   *  6、启动nginx镜像
     *  7、准备vue项目打包好的静态文件
     *  8、修改nginx.conf配置文件
     *  8、重启nginx容器
     *  9、测试

# 一、docker安装redis #

## 1、下载redis镜像 ##

docker pull redis:5.0

## 2、在本地服务器创建conf和data目录 ##

cd  /usr/local/redis
    mkdir conf
    mkdir data

## 3、进去conf目录，传输修改好了的redis.conf文件 ##

cd conf
    rz   # 上传文件的命令 如果没有，输入 yum install -y lrzsz 安装

## 4、关闭防火墙 ##

systemctl stop firewalld

> 如果是服务器，还需开放安全组。

## 5、启动redis镜像 ##

docker run --privileged -itd -p 6379:6379 -v  /usr/local/redis/conf/redis.conf:/usr/local/etc/redis/redis.conf -v /usr/local/redis/data:/data --name myredis redis:5.0 redis-server /usr/local/etc/redis/redis.conf

> 以后只要修改本地linux服务器的 /usr/local/redis/conf下的redis.conf 文件，会自动同步更新redis容器的usr/local/etc/redis下的redis.conf文件

## 6、查看容器 ##

docker ps

# 二、docker安装nginx #

## 1、下载nginx ##

docker pull nginx

## 2、启动nginx ##

用以下命令使用nginx默认的配置来启动一个 Nginx 容器实例：

docker run --name mynginx01 -p 8080:80 -d nginx

> –name mynginx：容器的名字叫做nginx-test,名字自己定义.  
> \-p: 端口进行映射，将本地 8080 端口映射到容器内部的 80 端口  
> \-d：容器启动后，在后台运行

## 3、关闭防火墙 ##

为了方便操作，这里直接关闭防火墙；如果是云服务器，还需开放安全组。

systemctl stop firewalld

## 4、查看启动的docker容器并测试 ##

docker ps

在浏览器中打开http://ip:8080，效果如下:  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L20wXzQ1MjM0NTEw_size_16_color_FFFFFF_t_70]

# 三 、nginx部署vue项目,映射本地目录到nginx容器 #

1）创建本地目录，用于存放Nginx的相关文件信息

mkdir -p /usr/local/nginx/html /usr/local/nginx/logs /usr/local/nginx/conf

> html :目录将映射为 nginx 容器配置的虚拟目录，后面的静态文件放这里。  
> logs: 目录将映射为 nginx 容器的日志目录。  
> conf: 目录里的配置文件将映射为 nginx 容器的配置文件。

2）拷贝容器内 Nginx 默认配置文件到本地当前目录下的 conf 目录

用以下命令使用nginx默认的配置来启动一个 Nginx 容器实例：

docker run --name mynginx01 -d nginx

docker ps   # 获取容器信息，第一个字段为容器id
    
    docker cp 容器id:/etc/nginx/nginx.conf /usr/local/nginx/conf

3）停止并删除容器（这步可以省略）

docker stop 容器id
    docker rm 容器id

## 6、启动nginx镜像 ##

docker run --privileged -d -p 8080:80 -p 8030:8030 -p 8031:8031 -p 8032:8032 --name mynginx02 \
      -v /usr/local/nginx/html:/usr/share/nginx/html \
      -v /usr/local/nginx/conf/nginx.conf:/etc/nginx/nginx.conf \
      -v /usr/local/nginx/logs:/var/log/nginx \
      nginx

> –name mynginx02：容器的名字叫做nginx-test,名字自己定义，但不能与现有的容器重复。  
> \-p: 端口进行映射，将本地 8080 端口映射到容器内部的 80 端口  
> \-d：容器启动后，在后台运行  
> \-v /usr/local/nginx/conf/nginx.conf:/etc/nginx/nginx.conf：将我们自己创建的 nginx.conf 挂载到容器的 /etc/nginx/nginx.conf

## 7、准备vue项目打包好的静态文件 ##

在/usr/local/nginx/html目录下新建文件夹，名字自定义

cd /usr/local/nginx/html
    mkdir vv_vue

然后将vue项目生成的dist目录上传到 /usr/local/nginx/html/vv\_vue目录下

cd vv_vue
    rz    # 上传vue项目生成的dist目录

## 8、修改nginx.conf配置文件 ##

cd /usr/local/nginx/conf
    vim nginx.conf

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L20wXzQ1MjM0NTEw_size_16_color_FFFFFF_t_70 1]

server { 
            listen       8030;
            server_name   ip;  # 填写后端的ip
            
            location / { 
                root   /usr/share/nginx/html/vhr_vue/dist;
                index  index.html index.htm;
                proxy_pass http://后端ip:8011;
                proxy_redirect default;
            }  
        }

或者

server { 
            listen       8030;
            server_name   ip;  # 填写后端的ip
            
            location / { 
                root   /usr/share/nginx/html/vhr_vue/dist;
                index  index.html index.htm;
            }  
            location /api { 
                proxy_pass http://后端ip:8011;
                proxy_redirect default;
            }
        }

## 8、重启nginx容器 ##

docker ps 
    docker restart 容器id

## 9、测试 ##

访问： http://ip:8030  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L20wXzQ1MjM0NTEw_size_16_color_FFFFFF_t_70 2]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L20wXzQ1MjM0NTEw_size_16_color_FFFFFF_t_70]: /images/20221120/23a39128861a4e0d8c5daf6979d9fb89.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L20wXzQ1MjM0NTEw_size_16_color_FFFFFF_t_70 1]: /images/20221120/ca95358dadef44f7bc63f2c5956f11fe.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L20wXzQ1MjM0NTEw_size_16_color_FFFFFF_t_70 2]: https://img-blog.csdnimg.cn/20201207113823465.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L20wXzQ1MjM0NTEw,size_16,color_FFFFFF,t_70