1.打包前端項(xiàng)目

1. 通過項(xiàng)目中的package.json文件，找到“build”運(yùn)行進(jìn)行打包

2. 打包成功后生成dist文件夾，就是打包好的項(xiàng)目

3. 在根目錄中創(chuàng)建一個(gè)Docker文件夾中創(chuàng)建nginx.conf配置文件, 同時(shí)在根目錄中創(chuàng)建一個(gè)Dockerfile文件

圖例:

nginx.conf

server {
    listen 80;
    # gzip config
    gzip on;
    gzip_min_length 1k;
    gzip_comp_level 9;
    gzip_types text/plain text/css text/javascript application/json application/javascript application/x-javascript application/xml;
    gzip_vary on;
    gzip_disable "MSIE [1-6]\.";
    root /usr/share/nginx/html;
    include /etc/nginx/mime.types;
    location / {
        try_files $uri /index.html;
}

1） gzip on; - 啟用Gzip壓縮功能。

2） gzip_min_length 1k; - 指定壓縮的最小文件大小。只有大于等于1千字節(jié)的文件才會(huì)被壓縮。

3） gzip_comp_level 9; - 設(shè)置Gzip壓縮的級(jí)別。級(jí)別從1到9，9為最高壓縮比，但也會(huì)消耗更多的CPU資源。

4） gzip_types - 指定需要進(jìn)行Gzip壓縮的文件類型。在這個(gè)例子中，配置了多種類型的文件，包括純文本文件（text/plain）、CSS文件（text/css）、JavaScript文件（text/javascript、application/json、application/javascript、application/x-javascript）以及XML文件（application/xml）。

5） gzip_vary on; - 在HTTP響應(yīng)頭中添加Vary標(biāo)頭，以通知緩存服務(wù)器根據(jù)Accept-Encoding頭來提供正確的壓縮版本。

6） gzip_disable "MSIE [1-6]\.”; - 禁用特定的瀏覽器壓縮。在這個(gè)例子中，它禁用了Internet Explorer 1至6版本的Gzip壓縮。這是因?yàn)樵缙诎姹镜腎E在處理Gzip壓縮時(shí)可能存在兼容性問題。

Dockerfile

FROM nginx
WORKDIR /usr/share/nginx/html/
USER root
COPY ./docker/nginx.conf /etc/nginx/conf.d/default.conf
COPY ./dist  /usr/share/nginx/html/
EXPOSE 80
CMD ["nginx", "-g", "daemon off;"]

1） FROM nginx : 安裝nginx

2） WORKDIR : 工作目錄，容器中執(zhí)行命令時(shí)的默認(rèn)位置

3） COPY ：拷貝,從執(zhí)行目錄拷貝指定文件打到容器中的指定目錄

4） EXPOSE ：聲明容器內(nèi)的服務(wù)將監(jiān)聽的端口(指令僅僅是一種文檔化的操作，它并不會(huì)自動(dòng)在容器啟動(dòng)時(shí)打開這些端口或配置網(wǎng)絡(luò)連接)

5） CMD 指定容器啟動(dòng)時(shí)要執(zhí)行的默認(rèn)命令或可執(zhí)行文件的指令

4.壓縮文件為了上傳到服務(wù)器(按照上圖為例)

把三個(gè)紅框,壓縮成一個(gè)壓縮包。

2.服務(wù)器項(xiàng)目上線

1.docker安裝

參考文檔:http://chabaoo.cn/article/153865.htm

2.壓縮包上傳到服務(wù)器

把打包好的user-center-frontend.zip上傳到服務(wù)器的指定目錄,這里以 /root/myapp 目錄為例

1.創(chuàng)建myapp目錄

mkdir /root/myapp 

2.把壓縮包放在目錄里

3.進(jìn)到myapp文件夾,解壓文件

unzip user-center-frontend.zip -d user-center-frontend

4.進(jìn)入user-center-frontend文件夾執(zhí)行命令,后面"."不要忽略

docker build -t user-center-frontend:v0.0.1 .

docker build -t 鏡像名稱:版本號(hào) .

5.運(yùn)行docker鏡像

1.查看docker 鏡像
docker images
2.根據(jù)打包好的鏡像，并運(yùn)行docker
docker run -d -p 80:80 user-center-frontend:v0.0.1 
3.查看容器運(yùn)行狀態(tài)
docker ps

項(xiàng)目部署成功

總結(jié)

到此這篇關(guān)于使用Docker完成前端部署的文章就介紹到這了,更多相關(guān)Docker前端部署內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

最新評(píng)論