出现了!前端自动化部署! (2)- Docker + Nginx !

1,891 阅读7分钟

Docker + Nginx !

前言

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


先了解一波Docker

首先,什么是Docker呢?下面是百度百科的介绍:

image.png

简单易懂

其实大家可以这样理解,我们可以在同一台服务器上安装很多镜像,就像一台电脑可以同时安装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

image.png

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

image.png

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

好的,接下来有几个动作要做:
第一步,我们先去建立一个目录准备去管理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来访问了呢,这篇就到这里吧,小伙伴们再见。