出现了！前端自动化部署！ （2）- Docker + Nginx ！

Docker + Nginx ！

前言

好的小伙伴们，服务器咱们已经有了，假设咱们的项目在本地也已经开发好了，接下来，咱们准备开搞开搞！

---

先了解一波Docker

首先，什么是Docker呢？下面是百度百科的介绍：

简单易懂

其实你们能够这样理解，咱们能够在同一台服务器上安装不少镜像，就像一台电脑能够同时安装win7，win10等系统这样的多系统同样，镜像你们就能够理解为系统啦，而docker可让咱们在服务器上运行多个镜像，并且还能够本身构建镜像，就像《个人世界》游戏同样，你能够下载一个地图来玩，也能够建立好一个地图保存起来本身玩或者给别人，也能够开多个游戏窗口同时玩多个地图同样。

三个概念

Docker中有三个概念：镜像，容器，仓库。镜像就不用说来，镜像运行起来后就会造成一个容器，镜像能够从远端的Dockerhub仓库拉取、上传，也能够保存在本身本地的仓库。

为啥用它？

使用Docker的好处就是咱们能够把须要使用的多种环境分开多个镜像来同时运行在多个容器中，好比jenkins运行在一个容器中，nginx运行在另外一个容器中，互相之间虽然不能直接访问，可是能够同时控制某些系统文件和目录呀，这样就能够作到通讯了，并且还能够把咱们配置好的一些环境直接生成成镜像，到时候就能够在任什么时候候使用了，好比咱们又买了个服务器，就不须要再一次配置安装各类环境了，把上一个服务器中Docker构建出的镜像拿到这个服务器中运行就能够了呢。

分离管理镜像容器可让咱们更专心（模块化的好处不用多说了吧），镜像的复用也让咱们减小不少重复的操做。

如此说来，Docker真的是个蛮不错的小伙子呢～

可是，咱们得先考虑下实现自动化部署的时候要不要加入Docker，由于这个东西确实是有点占用内存并且我们的乞丐版服务器运行起来有点慢呀，虽然说不使用也能够，可是本着学习的态度，咱们仍是接受它吧。

---

Docker的使用

ok，首先，咱们去给咱们的服务器上安装一个Docker吧，由于咱们选择的是centOS的系统，因此安装Docker是很是简单的。

很是敷衍的安装教程

在这里就给你们丢个菜鸟教程的连接，你们照着连接安装就好啦。

而后运行一波命令来看一下是否安装上了:

docker
复制代码

运行命令后能够看到一些docker的帮助信息，就说明咱们已经安装上了docker。

一些简单的Docker操做

咱们简单介绍一下docker的操做：

1. 查看当前有那些镜像   docker images
2. 删除一个不须要的镜像的时候运行 docker rm <image_id>   就能够，image_id在上一步查看镜像的时候能够找到哟
3. 也能够利用  docker build  <image_tag> 来构建一个镜像，新手基本不须要
4. 拉取镜像  docker pull <image>
5. 把一个镜像运行在一个容器里的方法也很简单，注意，运行的时候不须要选择容器，会自动分配一个容器的哟，并且运行的时候若是没有这个镜像会自动去拉取这个镜像的呢，好比： docker run <image>
6. 查看运行中的容器 docker ps  查看所有容器  docker ps -a
7. 启动容器 docker start <container_id> 中止容器 docker stop <container_id> 删除容器 docker rm <container_id>

好了，基本有这些命令就够咱们使用了，不够用再说吧。

---

搞个Nginx作WEB服务器

接下来进行下一步操做，咱们去搞个nginx来提供web项目的服务器吧

拉个Nginx镜像给它跑起来

首先在docker中拉取而且运行一个nginx的镜像：

docker pull nginx
docker run --name nginx-server -p 4000:80 -d nginx
复制代码

上面的命令很简单，先拉取nginx镜像，而后把这个镜像运行起来，起个名字教nginx-server，-d设置让这个容器一直运行着，-p 4000:80 表示将端口进行映射，咱们访问云服务器的4000端口的话其实就是访问nginx服务的80端口。

查看一下它有没有运行：

dicker ps
复制代码

很好，已经运行起来了，接下来访问http://IP地址:4000/应该就能够看到内容了。

各类目录与配置文件的处理

好的，接下来有几个动做要作：
第一步，咱们先去创建一个目录准备去管理nginx的配置和资源文件之类的东西，我就直接创建在root（就是~目录）下了。

mkdir -p ~/nginx/www/react-mixture ~/nginx/logs ~/nginx/conf
复制代码

里面三个文件夹，www文件夹放html、css、js子类的资源文件，react-mixture是准备放一个react项目的。logs是存放日志文件的，里面的error.log和access.log能够查阅nginx服务的错误日志和经过的请求的日志,conf目录准备存放配置文件。

而后将咱们拉取的nginx镜像的默认配置拉取到咱们创建好的文件夹:

docker cp <容器id>:/etc/nginx/nginx.conf ~/nginx/conf
复制代码

nginx镜像默认配置在/etc/nginx/nginx.conf，咱们给它拿到咱们本身的conf目录中。

好啦，而后从新运行一个容器，固然也能够先利用 docker rm <容器id>  删除刚才运行的容器（记得先docker stop <容器id>中止这个容器才能够删除哟）。

docker run -d -p 4000:80 --name nginx-server -v ~/nginx/www:/usr/share/nginx/html -v ~/nginx/conf/nginx.conf:/etc/nginx/nginx.conf -v ~/nginx/logs:/var/log/nginx nginx
复制代码

-d, -p, --name 你们都已经知道了，后面的-v命令是要将咱们本身建立的目录挂载到容器对应的目录中，本身建立的目录和容器的目录中间用 ： 隔开，其实就是作一个映射，这样的话咱们就操做和管理本身建立的那个nginx目录就能够了，nginx容器内部的资源也会同步的啦。

ok，接下来咱们在本身电脑上建立个index.html文件而后扔到服务器上刚建好的~/nginx/www下，看看nginx能不能访问到，假设咱们已经构建好这个index.html文件了，接下来的操做要记住：

1. 在建立好的index.html的目录下打开终端
2. 在终端中输入  scp -r index.html <username eq:root>``[@](mailto:root@47.92.164.250)ip地址``:~/nginx/www

ok，在服务器中查看一下这个文件就已经出现了，这就是将本地的文件上传到服务器上的便捷方法哟，接下来访问http://ip地址:4000就能够访问到这个页面了，是否是很是棒棒呢。

ok，哇，刚发现我说了这么多ok，不知道你们ok不ok，哈哈，接下来咱们去将一个配置好的nginx.conf文件也一并上传过去吧，这个文件是nginx中配置服务器路径、请求代理之类的。

scp -r nginx.conf <username eq:root>@ip地址:~/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;

    server {
        listen       80;
        server_name  47.92.164.250;

        #charset koi8-r;

        #access_log logs/host.access.log main;

        location / {
            root   /usr/share/nginx/html;
            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   html;
        }

        # proxy the PHP scripts to Apache listening on 127.0.0.1:80
        #
        location /api-lottery/ {
           proxy_pass   http://apis.juhe.cn/lottery/;
        }

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

    include /etc/nginx/conf.d/*.conf;
}
复制代码

这样的话nginx的配置就已经生效了，若是不生效就把这个容器中止后再启动一下，而后等一等应该就行了，配置更改会有延迟的。

---

后语

前期工做作的差很少了，接下来只要想办法把咱们前端项目的打包文件放入到~/nginx/www/react-mixture里就能够经过http://ip地址:4000/react-mixture来访问了呢，这篇就到这里吧，小伙伴们再见。