場景

CentOS7中Docker的安裝與配置：

https://blog.csdn.net/BADAO_LIUMANG_QIZHI/article/details/119028701

首先按照上面在CentOS7中安裝Docker

注：

博客：
https://blog.csdn.net/badao_liumang_qizhi
關(guān)注公眾號
霸道的程序猿
獲取編程相關(guān)電子書、教程推送與免費下載。

實現(xiàn)

1、首先打包Vue項目成dist文件

這里采用親后端分離的快速開發(fā)框架

若依前后端分離版手把手教你本地搭建環(huán)境并運行項目：

https://blog.csdn.net/BADAO_LIUMANG_QIZHI/article/details/108465662

然后再服務(wù)器上某目錄下，這里是在/usr/local下新建dockerfilenginx目錄

然后進入該目錄，將dist整個目錄上傳至該目錄下。

2、上傳nginx的配置文件，nginx.conf

去nginx的網(wǎng)站上下載一個

http://nginx.org/en/download.html

下載一個nginx找到里面的nginx.conf，并修改其內(nèi)容

添加資源映射

完整nginx.conf文件內(nèi)容為

#user? nobody; worker_processes? 1;#error_log? logs/error.log; #error_log? logs/error.log? notice; #error_log? logs/error.log? info;#pid??????? logs/nginx.pid;events {worker_connections? 1024; }http {include?????? mime.types;default_type? application/octet-stream;#log_format? main? '$remote_addr - $remote_user [$time_local] "$request" '#????????????????? '$status $body_bytes_sent "$http_referer" '#????????????????? '"$http_user_agent" "$http_x_forwarded_for"';#access_log? logs/access.log? main;sendfile??????? on;#tcp_nopush???? on;#keepalive_timeout? 0;keepalive_timeout? 65;#gzip? on;server {listen?????? 100;server_name? localhost;#charset koi8-r;#access_log? logs/host.access.log? main;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?? html;}# proxy the PHP scripts to Apache listening on 127.0.0.1:80##location ~ \.php$ {#??? proxy_pass?? http://127.0.0.1;#}# pass the PHP scripts to FastCGI server listening on 127.0.0.1:9000##location ~ \.php$ {#??? root?????????? html;#??? fastcgi_pass?? 127.0.0.1:9000;#??? fastcgi_index? index.php;#??? fastcgi_param? SCRIPT_FILENAME? /scripts$fastcgi_script_name;#??? include??????? fastcgi_params;#}# deny access to .htaccess files, if Apache's document root# concurs with nginx's one##location ~ /\.ht {#??? deny? all;#}}# another virtual host using mix of IP-, name-, and port-based configuration##server {#??? listen?????? 8000;#??? listen?????? somename:8080;#??? server_name? somename? alias? another.alias;#??? location / {#??????? root?? html;#??????? index? index.html index.htm;#??? }#}# HTTPS server##server {#??? listen?????? 443 ssl;#??? server_name? localhost;#??? ssl_certificate????? cert.pem;#??? ssl_certificate_key? cert.key;#??? ssl_session_cache??? shared:SSL:1m;#??? ssl_session_timeout? 5m;#??? ssl_ciphers? HIGH:!aNULL:!MD5;#??? ssl_prefer_server_ciphers? on;#??? location / {#??????? root?? html;#??????? index? index.html index.htm;#??? }#}}

3、在/usr/local/dockerfilenginx下新建Dockerfile文件

vi Dockerfile

修改其內(nèi)容為

#基礎(chǔ)鏡像 FROM nginx MAINTAINER “霸道的程序猿” # 將dist文件中的內(nèi)容復制到 /usr/share/nginx/html/ 這個目錄下面 COPY dist/? /usr/share/nginx/html/ COPY nginx.conf /etc/nginx/nginx.conf RUN echo 'echo nginx with dist init ok!!'

完成以上步驟之后該目錄下的文件為

4、構(gòu)建鏡像

在該目錄下執(zhí)行

docker build -t nginxwithdist .

注意后面有個點，代表Dockerfile文件在當前目錄

輸入

docker images

已經(jīng)能看到構(gòu)建好的鏡像了

5、運行鏡像

docker run -p 100:100 -d nginxwithdist

運行成功之后直接訪問CentOS上的100端口查看效果?

?

總結(jié)

以上是生活随笔為你收集整理的CentOS中使用Docker+nginx部署Vue打包的dist项目的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。