「这是我参与11月更文挑战的第5天，活动详情查看：2021最后一次更文挑战」

使用Docker

我自己的机器是树莓派4B, arm架构，使用的系统自带Docker，这里就省略Doker 安装环境，通常在Linux系统环境下安装Docker只用apt-get install Docker就可以了，并不困难复杂。

Nginx镜像使用

我们可以先把Nginx 镜像先拉取下来，Docker会更具自身运行的系统环境拉取合适的镜像：

docker pull nginx

我的已经有了，我就不再操作了：

docker Nginx配置文件路径映射

在从Nginx镜像运行一个容器的时候我觉得最重要的是要映射本地的文件目录，Nginx主要是是一个网站的配置文件，log文件配置。还有网站根目录文件夹。
我先把我自己容器创建的命令拿出来再一次讲解其中含义：

docker run --name web -d -p 8100:80 -v /opt/nginx/config/nginx.conf:/etc/nginx/nginx.conf -v /opt/nginx/config/conf.d:/etc/nginx/conf.d -v /opt/nginx/logs:/var/log/nginx -v /opt/vue-web:/opt/vue-web --restart=always nginx`

--name web

给Nginx容器起一个别名为web

-d

后台运行容器，并返回容器ID，可以记作backstage（后台）单词的缩写

-p 8100:80

p理解为port(端口)的意思，冒号左边是宿主机端酒，右边是容器端端口，容易记混顺序的话就记住容器映射端接口这里宿主机才是老大，老大排第一，哈哈。通常Nginx监听80端口的访问，然后把html的内容返回给访问者。我们映射过后就可以使用8100访问Nginx配置的网站了

-v

这里映射了四个文件目录，把几乎所有的使用到的配置文件都映射到宿主机来，更方便更改，不用进入容器操作，冒号左边是宿主机目录，右边是容器内的目录，我们详细讲解一下下面的文件位置的意思：

/opt/nginx/config/nginx.conf:/etc/nginx/nginx.conf

用于Nginx主要配置,说明一些运行线程多少，日志文件存放位置，引入的一些依赖，配置文件位置等等

user  nginx;
worker_processes  1;

error_log  /var/log/nginx/error.log warn;
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;
 #gzip  on;

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

/opt/nginx/config/conf.d:/etc/nginx/conf.d

这是一个文件夹，通常存放一个默认default.conf文件，用来配置单个网站的配置。还可以根据Nginx解析的网站增加新增其他文件，我们看看我们这个网站的配置文件是怎么写的：

server {
    listen       80;
    server_name  localhost;

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

    location / {
        root   /opt/vue-web/;
        index  index.html index.htm;
    }

    #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;
    }
}

指定了网站根目录文件夹为：/opt/vue-web/

/opt/nginx/logs:/var/log/nginx 和 /opt/vue-web:/opt/vue-web

映射这两个文件目录一个是日志存放的文件夹，一个是前端的文件目录映射，上篇文章写的CI脚本文件就是执行npm build生成的文件复制到了/opt/vue-web这个文件文件夹下。

测试，看效果

GitLab新建项目

根据提示推送代码：

git init --initial-branch=develop
git remote add origin git@gitlab.tuwei.space:root/my-vue-web.git
git add .
git commit -m "Initial commit"
git push -u origin develop

创建一个master分支，把代码从develop合并到master可以看到触发了CI:

有点慢，经历了好几分钟任务才完成：

我们来访问一下树莓派内网地址加上Docker映射的8100端口：简直完美，哈哈~~

总结

假如有固定的外网机器，可以内网穿透，还是很方便的，现在我的部署流程已经完成啦，接下来打算学习一下CSS,完善一些页面，开始做一些后端的功能，设计一下简单的数据库，加上一些动态内容。

从零开始摸索VUE，配合Golang搭建导航网站（五.使用doker部署启动）