Docker(Nginx)部署Vue

简介:目标使用docker将vue生成的dist文件,结合nginx生成镜像,然后运行;

1、首选确保vue项目正确运行,并能正确打包dist文件;

2、查看已经生成的dist文件

3、将dist文件打包为rar文件或者zip文件,本文使用rar文件

4、确保服务器已经安装docker;

新建文件夹:/home/questionaire-app/

将dist.rar 上传到该目录下,并解压到当前目录下;

复制代码
unrar x dist.rar

5、在/home/questionaire-app/下新建nginx配置文件default.conf,新建Dockerfile文件;
1)编辑default.conf文件

sql 复制代码
server {
    listen       80;
    server_name  127.0.0.1;
 
    #charset koi8-r;
    #access_log  /var/log/nginx/log/host.access.log  main;
 
    location / {
        root   /usr/share/nginx/html;
        try_files $uri $uri/ /index.html
        index  index.html index.htm;
    }
 
    location /prod-api/ {
        proxy_pass  http://127.0.0.1:18080/;
    }
 
    #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;
    #}
}

代理可以根据需求配置,不强求

2)编辑Dockerfile文件:

shell 复制代码
# 使用nginx镜像
FROM nginx
# 作者
MAINTAINER cmh
# 删除nginx 默认配置
RUN rm /etc/nginx/conf.d/default.conf
# 添加我们自己的配置 default.conf 在下面
ADD default.conf /etc/nginx/conf.d/
# 把刚才生成dist文件夹下的文件copy到nginx下面去
COPY dist/  /usr/share/nginx/html/

最终该目录下是这样的:

6、生成镜像并运行

1)生成镜像

" . " 这个点不要省略

shell 复制代码
docker build -t mall-admin-vue .

2)运行容器

shell 复制代码
docker run -d --name mall-admin-vue -p 8088:80 mall-admin-vue

7、测试:

浏览器通过ip+端口访问

参考文档:https://blog.csdn.net/cmh1008611/article/details/144793141

相关推荐
chinesegf2 小时前
Docker篇4-本地项目app.py与docker加载项目镜像的开发顺序
运维·docker·容器
CyreneSimon2 小时前
Docker 拉取配置教程:解决镜像拉取连接超时问题
运维·docker·容器
Sheldon一蓑烟雨任平生3 小时前
Vue3 依赖注入(provide 和 inject)
vue.js·inject·provide·vue3 依赖注入·跨级别组件通信
paopaokaka_luck4 小时前
基于SpringBoot+Vue的助农扶贫平台(AI问答、WebSocket实时聊天、快递物流API、协同过滤算法、Echarts图形化分析、分享链接到微博)
java·vue.js·spring boot·后端·websocket·spring
人间打气筒(Ada)5 小时前
Kubeadm快速部署k8s集群----1.20.0版本(基于centos7.9,因为k8s版本为1.24之下,所以可以直接使用docker)
docker·容器·kubernetes
Sheldon一蓑烟雨任平生5 小时前
Vue3 重构待办事项(主要练习组件化)
vue.js·重构·vue3·组件化练习
xuhe27 小时前
🛠️ 深度解析我的 Overleaf 私有化部署:一份稳定、高兼容性的 `docker-compose.yaml`
linux·docker·科研·overleaf
白小云<8 小时前
docker镜像
docker·容器·eureka
何故染尘優8 小时前
docker学习笔记,从入门开始!
笔记·学习·docker
不爱笑的良田9 小时前
从零开始的云原生之旅(一):把 Go 应用塞进 Docker
docker·云原生·golang