首先說明咱們的前端項(xiàng)目是基于Vue的，反向代理使用的是nginx
1.打包vue前端項(xiàng)目生成dist文件夾上傳至服務(wù)器
新建一個(gè)文件夾，叫vueDockerTest，下面的文件都需要。
cert是你存放ssl證書的文件夾，nginx.conf 是nginx的配置文件，dist是你打包的前端靜態(tài)文件
2.修改Dockerfile文件
# 基于nginx:1.20鏡像
FROM nginx:1.20
# 將dist文件中的內(nèi)容復(fù)制到 /usr/share/nginx/html/ 這個(gè)目錄下面
COPY dist/ /usr/share/nginx/html/dist/
# 用本地的 nginx.conf 配置來替換nginx鏡像里的默認(rèn)配置
COPY nginx.conf /etc/nginx/nginx.conf
# 將證書文件內(nèi)容復(fù)制到/usr/local/nginx/文件夾下
COPY cert/ /usr/local/nginx/cert/
3.修改nginx.conf文件
#user ?nobody;
worker_processes ?1;
events {
? ? worker_connections ?1024;
}
http {
? ? include ? ? ? mime.types;
? ? default_type ?application/octet-stream;
? ? sendfile ? ? ? ?on;
? ? #tcp_nopush ? ? on;
? ? #keepalive_timeout ?0;
? ? keepalive_timeout ?65;
? ? #gzip ?on;
? ? # HTTPS server
? ? server {
? ? ? ? listen 443 ssl;
? ? ? ? server_name ?localhost;
? ? ? ? ssl_certificate ? ? ?/usr/local/nginx/cert/server.crt;
? ? ? ? ssl_certificate_key ?/usr/local/nginx/cert/server.key;
? ? ? ? ssl_session_cache ? ?shared:SSL:1m;
? ? ? ? ssl_session_timeout ?5m;
? ? ? ? ssl_ciphers ?HIGH:!aNULL:!MD5;
? ? ? ? ssl_prefer_server_ciphers ?on;
? ? ? ? ? ? ? ? location / {
? ? ? ? ? ? root ? /usr/share/nginx/html/dist;
? ? ? ? ? ? ? ? ? ? ? ? try_files $uri $uri/ /index.html;
? ? ? ? ? ? index ?index.html index.htm;
? ? ? ? }
? ? ? ? ? ? ? ? location /backend/{
? ? ? ? ? ? ? ? ? ? ? ?proxy_set_header Host $http_host;
? ? ? ? ? ? ? ? ? ? ? ?proxy_set_header X-Real-IP $remote_addr;
? ? ? ? ? ? ? ? ? ? ? ?proxy_set_header REMOTE-HOST $remote_addr;
? ? ? ? ? ? ? ? ? ? ? ?proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
? ? ? ? ? ? ? ? ? ? ? ?client_max_body_size 20M;
? ? ? ? ? ? ? ? ? ? ? ?proxy_send_timeout 500;
? ? ? ? ? ? ? ? ? ? ? ?proxy_read_timeout 480;
? ? ? ? ? ? ? ? ? ? ? ?proxy_pass http://localhost:8992;
? ? ? ? ? ? ? ?}
? ? ? ? ? ? ? ? error_page ? 500 502 503 504 ?/50x.html;
? ? ? ? location = /50x.html {
? ? ? ? ? ? root ? html;
? ? ? ? }
? ? }
}
4.打包成docker鏡像
docker build -t nss-web:1.0 .
執(zhí)行docker images可以查看到已經(jīng)生成的docker鏡像
?文章來源：http://www.zghlxwxcb.cn/news/detail-428645.html
?文章來源地址http://www.zghlxwxcb.cn/news/detail-428645.html
到了這里，關(guān)于vue前端打包Docker鏡像并nginx運(yùn)行的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
