欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

Docker鏡像+nginx 部署 vue 項目的方法

 更新時間:2020年10月03日 11:23:43   作者:guo&qi  
這篇文章主要介紹了Docker鏡像+nginx 部署 vue 項目的方法,幫助大家更好的使用docke鏡像,感興趣的朋友可以了解下

一、打包vue項目

  在開發(fā)完的vue項目輸入如下命名,打包生成dist文件夾

yarn build / npm run build

  此時根目錄會多出一個文件夾:dist文件夾,里面就是我們要發(fā)布的東西。

  如果將該dist目錄整個傳到服務(wù)器上,部署成靜態(tài)資源站點就能直接訪問到該項目。

二、獲取nginx 鏡像

  nginx 是一個高性能的HTTP和反向代理服務(wù)器,此處我們選用 nginx 鏡像作為基礎(chǔ)來構(gòu)建我們的vue應(yīng)用鏡像。

  在終端輸入:

docker pull nginx

  即可以獲取到nginx鏡像。

  Docker鏡像是一個特殊的文件系統(tǒng),除了提供容器運行時所需的程序、庫、資源、配置等文件外,還包含了一些為運行時準(zhǔn)備的一些配置參數(shù)(如匿名卷、環(huán)境變量、用戶等)。 鏡像不包含任何動態(tài)數(shù)據(jù),其內(nèi)容在構(gòu)建之后也不會被改變。

  在終端輸入如下命令,可以看到nginx的鏡像

docker image ls

  鏡像結(jié)果如下所示:

三、創(chuàng)建 nginx config配置文件

  在項目根目錄下創(chuàng)建nginx文件夾,該文件夾下新建文件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;
    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;
  }
}

   注意⚠️:如果vue-router使用的是history模式,try_files $uri $uri/ /index.html; 非常重要?。?!

  因為我們的應(yīng)用是單頁客戶端應(yīng)用,如果后臺沒有正確的配置,當(dāng)用戶在瀏覽器訪問地址時,就會返回404。

  所以需要在服務(wù)端增加一個覆蓋所有情況的候選資源,如果URL匹配不到任何靜態(tài)資源,則應(yīng)該返回同一個index.html頁面,這個頁面就是你app依賴的頁面。

  上面的文件定義了首頁的指向為 /usr/share/nginx/html/index.html, 所以我們可以一會把構(gòu)建出來的index.html文件和相關(guān)的靜態(tài)資源放到/usr/share/nginx/html目錄下。

四、創(chuàng)建 Dockerfile 文件

# 設(shè)置基礎(chǔ)鏡像
FROM nginx
# 定義作者
MAINTAINER lihui <1107136746@qq.com>
# 將dist文件中的內(nèi)容復(fù)制到 /usr/share/nginx/html/ 這個目錄下面
COPY dist/ /usr/share/nginx/html/
#用本地的 default.conf 配置來替換nginx鏡像里的默認(rèn)配置
COPY nginx/default.conf /etc/nginx/conf.d/default.conf

五、基于該Dockerfile構(gòu)建vue應(yīng)用鏡像

  運行如下命令,注意不要少了最后的“ . ”

docker build -t test .

  -t 是給鏡像命名 ,test是生成鏡像的名字,. 是基于當(dāng)前目錄的Dockerfile來構(gòu)建鏡像。

  基于vue的鏡像就生成好了!

以上就是Docker鏡像+nginx 部署 vue 項目的方法的詳細(xì)內(nèi)容,更多關(guān)于docker部署vue項目的資料請關(guān)注腳本之家其它相關(guān)文章!

相關(guān)文章

  • docker-compose部署eureka服務(wù)端、客戶端的案例代碼

    docker-compose部署eureka服務(wù)端、客戶端的案例代碼

    這篇文章主要介紹了docker-compose部署eureka服務(wù)端、客戶端,本文通過實例代碼給大家介紹的非常詳細(xì),對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值,需要的朋友可以參考下
    2023-03-03
  • 從源碼構(gòu)建docker-ce的過程分析

    從源碼構(gòu)建docker-ce的過程分析

    這篇文章主要介紹了從源碼構(gòu)建docker-ce的過程,本文給大家介紹的非常詳細(xì),對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值,需要的朋友可以參考下
    2022-12-12
  • 利用Docker搭建Nexus私有倉庫實現(xiàn)Maven私服

    利用Docker搭建Nexus私有倉庫實現(xiàn)Maven私服

    Maven大家應(yīng)該都比較熟了,我這里就用安卓人狂喜的Gradle來演示一下,在build.gradle中編寫腳本即可上傳,接下來通過本文給大家介紹下利用Docker搭建Nexus私有倉庫實現(xiàn)Maven私服的問題,感興趣的朋友一起看看吧
    2022-01-01
  • docker容器日志查看常用命令及線上日志排查

    docker容器日志查看常用命令及線上日志排查

    這篇文章主要給大家介紹了關(guān)于docker容器日志查看常用命令及線上日志排查的相關(guān)資料, Docker是一種容器化技術(shù),使用它的過程中需要查看Docker的日志輸出來調(diào)試或解決問題,需要的朋友可以參考下
    2024-01-01
  • 使用Grafana 展示Docker容器的監(jiān)控圖表并設(shè)置郵件報警規(guī)則(圖解)

    使用Grafana 展示Docker容器的監(jiān)控圖表并設(shè)置郵件報警規(guī)則(圖解)

    這篇文章主要介紹了使用Grafana 展示Docker容器的監(jiān)控圖表并設(shè)置郵件報警規(guī)則的圖文教程,非常不錯,具有參考借鑒價值,需要的朋友參考下吧
    2017-01-01
  • Ubuntu16.04Docker的CS模式詳細(xì)介紹

    Ubuntu16.04Docker的CS模式詳細(xì)介紹

    這篇文章主要介紹了Ubuntu16.04Docker的CS模式詳細(xì)介紹的相關(guān)資料,這里對Docker CS模式圖文詳細(xì)介紹,需要的朋友可以參考下
    2016-12-12
  • docker-compose?up?-d遇到的問題及解決

    docker-compose?up?-d遇到的問題及解決

    這篇文章主要介紹了docker-compose?up?-d遇到的問題及解決方案,具有很好的參考價值,希望對大家有所幫助。如有錯誤或未考慮完全的地方,望不吝賜教
    2023-03-03
  • Ceph集群Docker容器化部署過程

    Ceph集群Docker容器化部署過程

    這篇文章主要介紹了Ceph集群Docker容器化部署過程,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教
    2024-01-01
  • Docker容器編譯LNMP的實現(xiàn)示例

    Docker容器編譯LNMP的實現(xiàn)示例

    本文主要介紹了Docker容器編譯LNMP,使用Docker容器基于centos鏡像分別制作nginx鏡像,mysql鏡像和php鏡像使用編譯安裝的方式,具有一定的參考價值,感興趣的可以了解一下
    2021-12-12
  • Docker自定義鏡像上傳至阿里云的實現(xiàn)

    Docker自定義鏡像上傳至阿里云的實現(xiàn)

    本文主要介紹了Docker自定義鏡像上傳至阿里云的實現(xiàn),文中通過示例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
    2024-04-04

最新評論