前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >Docker部署Vue项目

Docker部署Vue项目

原创
作者头像
阿贾
修改2021-02-22 10:12:28
2.7K0
修改2021-02-22 10:12:28
举报
文章被收录于专栏:知识库

具体请参考官方文档 https://cli.vuejs.org/zh/guide/deployment.html#docker-nginx

  • Docker先下载nginx镜像
代码语言:javascript
复制
docker pull nginx
  • 使用Vue图形化界面创建新项目vue-docker
代码语言:text
复制
vue ui
  • 启动项目检查是否能正常运行
代码语言:text
复制
npm run serve
  • 在项目根目录创建Dockerfile文件
代码语言:text
复制
FROM node:10
COPY ./ /vue-docker
WORKDIR /vue-docker
RUN npm install && npm run build

FROM nginx
RUN mkdir /vue-docker
COPY --from=0 /vue-docker/dist /vue-docker
COPY nginx.conf /etc/nginx/nginx.conf
  • 在项目根目录创建.dockerignore文件
代码语言:javascript
复制
**/node_modules
**/dist
  • 在项目根目录创建nginx.conf文件
代码语言:javascript
复制
user  nginx;
worker_processes  1;
error_log  /var/log/nginx/error.log warn;
pid        /var/run/nginx.pid;
events {
  worker_connections  1024;
}
http {
  include       /etc/nginx/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  /var/log/nginx/access.log  main;
  sendfile        on;
  keepalive_timeout  65;
  server {
    listen       80;
    server_name  localhost;
    location / {
      root   /vue-docker;
      index  index.html;
      try_files $uri $uri/ /index.html;
    }
    error_page   500 502 503 504  /50x.html;
    location = /50x.html {
      root   /usr/share/nginx/html;
    }
  }
}
  • 构建 Docker 镜像
代码语言:text
复制
docker build . -t vue-docker
  • 运行 Docker 镜像
代码语言:text
复制
docker run -d -p 9090:80 vue-docker
  • 访问vue-docker
代码语言:javascript
复制
http://localhost:9090/

原创声明:本文系作者授权腾讯云开发者社区发表,未经许可,不得转载。

如有侵权,请联系 cloudcommunity@tencent.com 删除。

原创声明:本文系作者授权腾讯云开发者社区发表,未经许可,不得转载。

如有侵权,请联系 cloudcommunity@tencent.com 删除。

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
相关产品与服务
容器镜像服务
容器镜像服务(Tencent Container Registry,TCR)为您提供安全独享、高性能的容器镜像托管分发服务。您可同时在全球多个地域创建独享实例,以实现容器镜像的就近拉取,降低拉取时间,节约带宽成本。TCR 提供细颗粒度的权限管理及访问控制,保障您的数据安全。
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档