出現了！前端自動化部署！ （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來訪問了呢，這篇就到這裏吧，小夥伴們再見。