基於Centos 7 vue+nginx+docker 的前端項目部署

本文轉載自查看原文 2020-07-17 14:48 802

1.先在本地將vue項目建立，並且確定能跑起來使用npm run serve

ctrl+鼠標左鍵在本地查看。

然后使用npm run build,會在本地生成一個dist文件。

然后建一個文件Dockerfile，文件內容可以在VS Code里面先寫好，或者在linux服務器上面編輯都可以。

然后需要一台服務器，我這里是用的公司內部的linux服務器，如果沒有自己的公司的服務器可以在阿里雲或者騰訊雲購買一台服務器，這里不多做闡述。

當我們連接到linux服務器之后，需要一些環境，我們需要安裝Dokcer、nginx、解壓文件。

2.安裝 Docker Engine-Community

安裝所需的軟件包。yum-utils 提供了 yum-config-manager ，並且 device mapper 存儲驅動程序需要 device-mapper-persistent-data 和 lvm2。

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

設置yum源

yum-config-manager --add-repo https://download.docker.com/linux/centos/docker-ce.repo

選擇特定版本

yum list docker-ce --showduplicates | sort -r

我選擇的我當時最新的版本，使用下面命令安裝Docker，可能會消耗一點時間。

yum install docker-ce-19.03.9

啟動Docker

systemctl start docker

查看Docker是否啟動成功，可以使用命令docker version，如果看到下圖所示，有版本號就顯示成功了:

3.使用docker安裝nginx

查找nginx版本

docker search nginx

下載nginx

docker pull nginx

下載成功后，使用命令docker images可以查看已經下載的鏡像，下圖名字是nginx的鏡像就是下載好的鏡像。

4.部署VUE項目

　　4.1把本地需要部署的vue項目使用壓縮工具打包，然后上傳到linux服務器。

　　首先確定好要將壓縮包放在哪個目錄下，我這里是cd /home 到目錄下，然后直接使用命令 rz 將本地的壓縮包上傳到linux服務器。

查看目錄下的文件命令是 ls，然后將壓縮包解壓使用命令 unzip docker-vue.zip（docker-vue是文件的名稱）。

然后進入解壓后的文件docker-vue,使用命令ls，查看下面的文件夾。

接下來使用編輯文件命令 vi Dockerfile，進去直接按 i 可以編輯里面的內容。

FROM nginx:latest
MAINTAINER xx
COPY dist/ /usr/share/nginx/html/

將上面的內容復制到Dockerfile文件里面，然后按ESC使用 :wq 這是保存並退出的意思。

第一行是設置的基礎鏡像，也就是剛才pull的nginx鏡像。

第二行是寫一個作者，寫上自己的郵箱就可以了。

第三行的意思就是將dist文件夾下面的內容拷貝到/usr/share/nginx/html/這個目錄下。

還有一個文件default.conf需要編輯一下文件內容。

server {
    listen       80;
    server_name  localhost;

    #charset koi8-r;
    access_log  /var/log/nginx/host.access.log  main;
    error_log  /var/log/nginx/error.log  error;

    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   /usr/share/nginx/html;
    }
}