在CentOS雲服務器中使用nginx部署Vue項目

文章正文第一句：「這是我參與更文挑戰的第1天，活動詳情查看： 更文挑戰」

部署前端項目

1. 首先是在本身的電腦上寫完前端項目，而後運行npm run build 生成一個dist文件夾。

2. 容器化包括三個階段，包括編寫代碼，咱們已經完成。構建鏡像和建立和運行容器。

3. 構建Docker鏡像主要應用自動建立，咱們能夠在我麼的項目的根目錄建立一個Dockerfile文件，裏面的內容就是構建鏡像的一條條指令

   #該鏡像基於nginx鏡像而構建
   FROM nginx
   #將項目根目錄下dist文件夾下的全部文件複製到鏡像中/usr/share/nginx/html/目錄下
   COPY dist/ /usr/myDocker/client/html/
   #將nginx目錄下的default.conf複製到/etc/nginx/conf.d/default.conf
   #用本地的配置替換nginx鏡像裏的默認配置
   COPY nginx/default.conf /etc/nginx/conf.d/default.conf
   # Dockerfile是一個用來構建鏡像的文本文件，內容包含了一條條構建鏡像的指令
   複製代碼

4. 咱們須要本身寫一個nginx的配置文件，構建鏡像的時候用來替換nginx服務器裏面默認的配置

   #虛擬主機的配置
   server {
   	#nginx的監聽端口號
       listen       80;
       #訪問域名，能夠有多個，空格隔開
       server_name  82.156.197.106;
   
       #charset koi8-r;
       #定義本虛擬主機的訪問日誌
       access_log  /var/log/nginx/host.access.log  main;
       error_log  /var/log/nginx/error.log  error;
   	#對「/」啓動反向代理
       location / {
           #定義了首頁的指向爲/usr/myDocker/client/index.html
           #因此意思就是把打包後的index.html和相關的靜態資源放到虛擬主機的/usr/share/nginx/html
           root   /usr/myDocker/client/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   /usr/share/nginx/html;
       }
   }
   複製代碼

5. 這兩個文件寫完以後，咱們須要把dist文件夾，dockerfile，nginx.conf這個三個文件經過Xftp送到雲服務器的一個文件夾裏面，這個文件夾只能有這三個文件，假設咱們叫client。

6. 還有一種方法就是給CentOS安裝上git,node等環境，直接從github上把這個項目拉下來，而後npm install 和npm run build 。這樣的話就須要注意須要增長一個.dockerignore文件，不打包node_moundle

7. 一切準備就緒後，就能夠構建咱們本身的鏡像了。咱們雲服務器的client目錄下面執行命令docker build -t vue-client-image . 注意這個點是必須的。這樣咱們就構建好了一個鏡像。這個時候咱們可使用docker images來查看咱們建立的鏡像。

8. 而後咱們就能夠建立並運行咱們的容器了，經過docker run -p 8080:80 --name client -d vue-client-image -p的意思是端口映射，將咱們服務器的8080端口映射到nginx的80端口，由於咱們在nginx.conf設置的就是80。這樣咱們就能夠在本身的電腦上經過ip地址:8080來訪問咱們的項目了。注意咱們必定要在服務器上打開8080端口。-d的意思是在後臺運行這個容器

9. docker ps 就能夠查看都全部在後臺運行的容器。 docker stop 容器id 就能夠關閉運行的容器。docker rm 容器id就能夠刪除容器了。docker ps -a能夠查看全部的容器。docker rmi 鏡像id 刪除鏡像。

Docker中使用MySQL

1. MySQL的使用和本地差很少，首先是使用mysql鏡像建立一個容器，命令以下docker run -p 3306:3306 --name vue-mysql -e MYSQL_ROOT_PASSWORD=123456 -d mysql:5.7端口映射使用服務器的3306端口映射到mysql的3306端口，-e是配置信息，此處咱們能夠配置這個mysql服務的密碼。這樣咱們的容器就搭建好了。
2. docker exec -it vue-mysql bash 執行命令就能夠進入咱們建立的mysql服務了。注意咱們還須要用密碼登陸進去 咱們的mysql服務器。命令是 mysql -uroot -p123456 。登錄進去後的操做就跟咱們日常的同樣了。
3. 咱們嘗試使用navicat鏈接到咱們服務器中的mysql服務。跟日常同樣，localhost換成咱們的域名。

後記

對於一個全棧項目來講，咱們還少了後端的代碼，等我學一學nest.js以後，再寫一個後端項目，而後再把代碼分享出來。你們記得關注。