手把手教你用docker部署一個vue項目

語言: CN / TW / HK

theme: nico highlight: a11y-dark


1、介紹docker介紹

1.1 docker由來

```text 一幫年輕人創業,創辦了一家公司,2010年的專門做PAAS平台。

到了2013年的時候,像亞馬遜、微軟、Google都開始做PAAS平台。

2013年,將公司內的核心技術對外開源,核心技術就是Docker。

到了2014年的時候,得到了C輪融資,$4000W

到了2015年的時候,得到了D輪融資,$9500W

全神貫注的維護Docker。

所羅門主要作者之一。 ```

1.2 docker的思想

```text 1.集裝箱:

1.會將所有需要的內容放到不同的集裝箱中,誰需要這些環境就直接拿到這個集裝箱就可以了

2.標準化:

1.運輸的標準化:Docker有一個碼頭,所有上傳的集裝箱都放在了這個碼頭上,當誰需要某一個環境,就直接指派大海豚去搬運這個集裝箱就可以了。
2.命令的標準化:Docker提供了一系列的命令,幫助我們去獲取集裝箱等等操作。
3.提供了REST的API:衍生出了很多圖形化界面,Rancher。

3.隔離性:

1.Docker在運行集裝箱內的內容時,會在LInux的內核中,單獨的開闢一片空間,這片空間不會影響到其他程序。

```

text - 註冊中心。(超級碼頭,上面放的就是集裝箱) - 鏡像。(集裝箱) - 容器。(運行起來的鏡像)

2、docker的基本操作

2.1 下載關於Docker的依賴環境

js yum -y install yum-utils device-mapper-persistent-data lvm2

2.2 設置一下下載Docker的鏡像源

js yum-config-manager --add-repo http://mirrors.aliyun.com/docker-ce/linux/centos/docker-ce.repo

2.3 安裝Docker

js yum makecache fast yum -y install docker-ce

2.4 啟動,並設置為開機自動啟動,測試

```js

啟動Docker服務

systemctl start docker

設置開機自動啟動

systemctl enable docker

測試

docker run hello-world ```

2.5 注意事項

```js

如果服務器已安裝dokcer,先卸載在安裝

$ sudo yum remove docker \ docker-client \ docker-client-latest \ docker-common \ docker-latest \ docker-latest-logrotate \ docker-logrotate \ docker-selinux \ docker-engine-selinux \ docker-engine ```

3、Docker的中央倉庫

```js 1. Docker官方的中央倉庫:這個倉庫是鏡像最全的,但是下載速度很慢。http://hub.docker.com 1. 國內的鏡像網站:網易蜂巢、daoCloud...

​ http://c.163yun.com/hub#/home

​ http://hub.daocloud.io (推薦使用)

  1. 在公司內部會採用私服的方式拉取鏡像。(添加配置) ```

```js

需要在/etc/docker/daemon.json

{ "registry-mirrors":["http://registry.docker-cn.com"], "insecure-registries":["ip:port"] }

重啟兩個服務

systemctl daemon-reload systemctl restart docker ```

4、鏡像操作

4.1 拉取鏡像到本地

```js

拉取鏡像到本地

docker pull 鏡像名稱[:tag]

舉個例子

docker pull tomcat daocloud.io/library/tomcat:8.5.15-jre8 ```

4.2 查看全部本地的鏡像

js docker images

4.3 刪除本地鏡像

js docker rmi 鏡像的標識

4.4 鏡像的導入導出(不規範)

```js

將本地的鏡像導出

docker save -o 導出的路徑 鏡像id

加載本地的鏡像文件

docker load -i 鏡像文件

修改鏡像名稱

docker tag 鏡像id 新鏡像名稱:版本 ```

5、容器的操作

5.1 運行容器

```js

簡單操作

docker run 鏡像的標識|鏡像名稱[:tag]

常用的參數

docker run -d -p 宿主機端口:容器端口 --name 容器名稱 鏡像的標識|鏡像名稱[:tag]

-d:代表後台運行容器

-p 宿主機端口:容器端口:為了映射當前Linux端口和容器端口

--name 容器名稱:指定容器的名稱

docker run --name=mynginx -d --restart=always -p 88:80 nginx ```

5.2 查看正在運行的容器

```js docker ps [-qa]

-a:查看全部的容器,包括沒有運行

-p:只查看容器得到標識

```

5.3 查看容器的日誌

```js docker logs -f 容器id

-f:可以滾動查看日誌的最後幾行

```

5.4 進入到容器內部

js docker exec -it 容器id bash

5.5 刪除容器(刪除容器前,需要停止容器)

```js

停止指定的容器

docker stop 容器id

停止全部容器

docker stop $(docker pa -qa)

刪除指定的容器

docker rm 容器id

刪除全部容器

docker rm $(docker pa -qa) ```

5.6 啟動容器

js docker start 容器id

6、docker部署vue項目

6.1 編寫nginx.conf配置

```js

user nobody;

worker_processes 1;

error_log logs/error.log;

error_log logs/error.log notice;

error_log logs/error.log info;

pid logs/nginx.pid;

events { worker_connections 1024; }

http { include 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  logs/access.log  main;

sendfile        on;
#tcp_nopush     on;

#keepalive_timeout  0;
keepalive_timeout  65;

#gzip  on;

server {
    listen       80;
    server_name  192.168.3.85;

    gzip on;
    gzip_min_length 1k;
    gzip_comp_level 9;
    gzip_types text/plain application/javascript application/x-javascript text/css application/xml text/javascript application/x-httpd-php image/jpeg image/gif image/png;
    gzip_vary on;
    gzip_disable "MSIE [1-6]\.";

    #charset koi8-r;

    #access_log  logs/host.access.log  main;

    location / {
        root   /usr/share/nginx/html;
        index  index.html index.htm;
        try_files $uri $uri/ /index.html;
    }

    #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 ~ \.php$ {
    #    proxy_pass   http://127.0.0.1;
    #}

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


# another virtual host using mix of IP-, name-, and port-based configuration
#
#server {
#    listen       8000;
#    listen       somename:8080;
#    server_name  somename  alias  another.alias;

#    location / {
#        root   html;
#        index  index.html index.htm;
#    }
#}


# HTTPS server
#
#server {
#    listen       443 ssl;
#    server_name  localhost;

#    ssl_certificate      cert.pem;
#    ssl_certificate_key  cert.key;

#    ssl_session_cache    shared:SSL:1m;
#    ssl_session_timeout  5m;

#    ssl_ciphers  HIGH:!aNULL:!MD5;
#    ssl_prefer_server_ciphers  on;

#    location / {
#        root   html;
#        index  index.html index.htm;
#    }
#}

} ```

6.2 編寫Dockerfile文件

```js FROM nginx:latest

定義作者

MAINTAINER wangsh[email protected]

刪除目錄下的default.conf文件

RUN rm /etc/nginx/conf.d/default.conf

設置時區

RUN cp /usr/share/zoneinfo/Asia/Shanghai /etc/localtime && echo 'Asia/Shanghai' >/etc/timezone

將本地nginx.conf配置覆蓋nginx配置

COPY nginx.conf /etc/nginx/nginx.conf

將dist文件中的內容複製到 /usr/share/nginx/html/ 這個目錄下面

COPY dist/ /usr/share/nginx/html/daison-web/

聲名端口

EXPOSE 80

RUN echo 'web project build success!!' ```

6.3 打包vue項目

```js

先將vue項目進行打包

npm run build

將生成的dist和nginx.conf、Dockerfile進行壓縮打包

```

6.4 上傳服務器

```js

安裝lrzsz

npm install lrzsz

在home文件夾下面創建web文件夾

mkdir web

從壓縮的文件上傳到/home/web

rz

解壓文件

unzip app.zip

打包生成

docker build -t test:v1 .

啟用容器

sudo docker run -dit --name demo -p 8888:80 --restart=always --privileged=true demo:v1

docker run -di -v /home/web/nginx.conf:/etc/nginx/nginx.conf --name=demo -p 8099:80 demo:v1.0

```

7、docker-compose部署vue項目

7.1 compose介紹

js Compose是一個用來定義和運行復雜應用的Docker工具。一個使用Docker容器的應用,通常由多個容器組成。使用Docker Compose不再需要使用shell腳本來啟動容器。 Compose 通過一個配置文件來管理多個Docker容器,在配置文件中,所有的容器通過services來定義,然後使用docker-compose腳本來啟動,停止和重啟應用,和應用中的服務以及所有依賴服務的容器,非常適合組合使用多個容器進行開發的場景。

7.1 下載docker-compose

```js

github地址

http://github.com/docker/compose

下載最新版的docker-compose文件

sudo curl -L http://github.com/docker/compose/releases/download/v1.16.1/docker-compose-uname -s-uname -m -o /usr/local/bin/docker-compose

若github訪問太慢,可以用daocloud下載

sudo curl -L http://get.daocloud.io/docker/compose/releases/download/v1.25.1/docker-compose-uname -s-uname -m -o /usr/local/bin/docker-compose

pip安裝

sudo pip install docker-compose ```

7.2 添加可執行權限

js sudo chmod +x /usr/local/bin/docker-compose

7.3 測試安裝結果

```js $ docker-compose --version

docker-compose version 1.16.1, build 1719ceb ```