前情回顧：寫個網站吧！ --Flask+Vue.js+MySQL+Docker（1）--簡介
到了最煩人最煩人的部署階段，先簡單畫一個我的思路的圖：
思路就是兩個docker容器，一個佈置前端，一個佈置後端，最後使用nginx對請求進行解析，以分別解析到對應的端口。可以說是很清晰很簡單了，然而！最令人絕望的階段開始了。
前端
首先寫個nginx的配置文件：
server {
listen 80;
location / {
root /usr/share/nginx/html;
index index.html;
}
}
內容很簡單，監聽80端口，定位我們需要的index.html。然後打包前端，Dockerfile如下：
FROM nginx:alpine
COPY ./nginx.conf /etc/nginx/conf.d/default.conf
COPY ./dist /usr/share/nginx/html
基礎鏡像是nginx的alpine版本，這裏把npm build生成的文件還有nginx配置文件放到對應的位置即可。
整個過程很流暢，沒什麼需要注意的，直接就行。注意要把dist文件夾轉移到Dockerfile同級。
後端
嘗試了幾種方法之後，我選擇了alpine的基礎上安裝python作爲基礎鏡像：
FROM alpine:latest
RUN apk add --no-cache python3-dev\
&&pip3 install --upgrade pip
WORKDIR /app
COPY . /app
RUN pip3 --no-cache-dir install -r requirements.txt -i https://mirrors.aliyun.com/pypi/simple
EXPOSE 5000
CMD gunicorn -w 4 -b 0.0.0.0:5000 app:app
其中的曲折也不多說了，這樣的話我嘗試起來是最好的。
因爲只是API,所以也沒有使用nginx做反向代理，當然加上是更好的。
調度Nginx
文件內容如下：
server {
listen 80;
server_name example.com;
location / {
proxy_set_header X-Real-IP $remote_addr;
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for; proxy_pass http://127.0.0.1:3001;
}
location /api {
proxy_set_header X-Real-IP $remote_addr;
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for; proxy_pass http://127.0.0.1:3002;
}
}
因爲我的域名備案還沒下來，這裏的配置有沒有問題我還不知道，如果有問題我再更新這部分內容並補充。
部署
這裏使用的是阿里的容器鏡像服務，簡單好用還是私有的。
當然使用dockerhub也是可以的。
具體使用不多說了，寫的很清楚了。設私有倉庫的密碼然後在本地登陸，隨後即可推鏡像了。
因爲一些生產環境和開發環境不一樣產生的問題再前文已經講過了，所以剩下的坑也不是很多了。
這裏我使用的部署方式是portainer.io, Github地址。
使用非常方便，大家可以看文檔，編輯docker-compose的話也是在線的編輯器：
大家如果也是使用私有倉庫的話別忘了先設置倉庫地址和密碼。
docker-compose不熟悉的可以去查閱文檔，這裏可以看出因爲MySQL沒用開鏡像，這裏的文件都比較簡單。
整個流程就是這樣的，最後說一個很奇怪的BUG
BUG
簡單的說是，在我本機上的鏡像，可以成功運行，但是在雲服務器上就是會出錯，顯示的：
o.indexof不是一個合理的方法
看起來似乎是element的錯誤，不禁想發問，同一個鏡像爲什麼會隨着主機而改變了呢。
這個問題困擾了我很久，即使重新佈置也是有錯誤的。
巧的是今天中午排除了各種錯誤之後，我又重新部署了一編，竟然又沒有錯誤了。。
很無語。。。
現在還是很無語。。。
未來的事：
docker的知識一定是要繼續學習的，這個東西太好用了。。。
未來再寫我的網站的內容，希望自己已經有底氣去面對工作了，加油，明天。