手把手教你用docker部署一個vue項目
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 (推薦使用)
- 在公司內部會採用私服的方式拉取鏡像。(添加配置) ```
```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 ```