docker部署vue

1: 创建 Dockerfile 文件
    
配置一下内容:

# 设置基础镜像,这里使用最新的nginx镜像,前面已经拉取过了
FROM nginx
# 将dist文件中的内容复制到 /usr/share/nginx/html/ 这个目录下面
COPY dist/  /usr/share/nginx/html/

2: 安装nginx


 拉取:nginx 镜像 
 docker pull nginx (不指定版本为最新版本)
 运行:
 docker run --name nginx -d -p 4030:80 nginx

3:把Dockerfile 文件和dist包放到一个文件夹中 传到服务器目录下 drugVue文件夹
 


4:切换到drugVue文件夹下 生成镜像 

    docker build -t drugvue .   

说明 drugvue 生成的镜像名称

5:查看镜像


   docker images


6:运行 


     docker run -d   --name drugvue  --link=drugstore:drugstore -p 9020:80 镜像ID
7:查看日志


     docker logs --tail 500 --follow --timestamps  容器ID 
     docker logs -f drugvue  

 8:查看容器

    docker ps

### 使用Docker部署Vue应用程序的最佳实践 #### 准备工作环境 为了构建和运行基于Vue的应用程序容器,需要安装Docker并配置好开发环境。确保本地机器上已成功安装Docker,并能够正常启动服务。 #### 构建Vue项目基础结构 创建一个新的Vue CLI项目作为起点[^1]: ```bash npm install -g @vue/cli vue create my-vue-app cd my-vue-app ``` #### 创建自定义Dockerfile 在项目的根目录下新建名为`Dockerfile`的文件,用于描述如何打包应用及其依赖项进入Docker镜像内。对于生产环境中使用的Vue应用来说,推荐采用多阶段构建的方式优化最终生成的镜像大小: ```dockerfile # Build stage FROM node:lts-alpine as build-stage WORKDIR /app COPY package*.json ./ RUN npm ci --silent COPY . . RUN npm run build # Production stage FROM nginx:stable-alpine COPY --from=build-stage /app/dist /usr/share/nginx/html EXPOSE 80 CMD ["nginx", "-g", "daemon off;"] ``` 此设置首先利用Node.js镜像来编译前端资源,之后切换至Nginx服务器以高效提供静态页面内容给客户端访问。 #### 配置Nginx反向代理(可选) 如果希望进一步增强安全性或实现更复杂的路由逻辑,则可以在上述基础上增加一层Nginx配置来进行反向代理处理。这通常涉及到修改默认的Nginx配置文件(`default.conf`)以便更好地适应具体应用场景的需求。 #### 构建与推送Docker镜像 完成以上准备工作后,可以执行如下命令来构建Docker镜像并将之推送到公共或私有的Docker Registry中去: ```bash docker build -t your-docker-id/my-vue-app . docker push your-docker-id/my-vue-app ``` 这里假设已经注册过Docker Hub账号并且完成了必要的认证流程。 #### 运行容器实例 最后一步是在目标主机上拉取最新版本的镜像并通过指定端口映射等方式启动相应的容器实例: ```bash docker pull your-docker-id/my-vue-app docker run -d -p 8080:80 --name vue-web your-docker-id/my-vue-app ``` 这样就可以通过浏览器访问位于http://localhost:8080上的Vue应用了。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

Java之眼

创作不易,一起努力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值