前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >docker快速使用nginx实现部署前端dist

docker快速使用nginx实现部署前端dist

作者头像
阿超
发布2024-04-25 16:15:37
1070
发布2024-04-25 16:15:37
举报
文章被收录于专栏:快乐阿超快乐阿超

才能不是天生的,可以任其自便的,而要钻研艺术,请教良师,才会成材。——歌德

macwindows用客户端可视化工具修改镜像,要是网没问题可以不配置

在这里配置好上海交通大学的镜像

代码语言:javascript
复制
{
  "registry-mirrors": ["https://docker.mirrors.sjtug.sjtu.edu.cn"]
}

如果是linux下,编辑/etc/docker/daemon.json,写入

代码语言:javascript
复制
{
  "registry-mirrors": ["https://docker.mirrors.sjtug.sjtu.edu.cn"]
}

然后重启:

代码语言:javascript
复制
sudo systemctl restart docker

然后在dist的同层级目录下面新建Dockerfile

代码语言:javascript
复制
FROM nginx
COPY ./dist /usr/share/nginx/html
EXPOSE 80

然后构建镜像

代码语言:javascript
复制
GithubIireAchao:Downloads achao$ docker build -t my-frontend .
[+] Building 16.0s (7/7) FINISHED                          docker:desktop-linux
 => [internal] load build definition from Dockerfile                       0.0s
 => => transferring dockerfile: 473B                                       0.0s
 => [internal] load metadata for docker.io/library/nginx:latest            2.7s
 => [internal] load .dockerignore                                          0.0s
 => => transferring context: 2B                                            0.0s
 => [internal] load build context                                          0.3s
 => => transferring context: 78.95MB                                       0.3s
 => [1/2] FROM docker.io/library/nginx:latest@sha256:c4ac237ad2675ab27ba  12.8s
 => => resolve docker.io/library/nginx:latest@sha256:c4ac237ad2675ab27ba4  0.0s
 => => sha256:50376dc014ca05120de7018b80cbe5b9246e057e8ee 2.30kB / 2.30kB  0.0s
 => => sha256:26070551e657534bdf420d43107e85b972b2e8c21 29.16MB / 29.16MB  6.3s
 => => sha256:c4ac237ad2675ab27ba42390a9b83dbe90b21fe94 10.22kB / 10.22kB  0.0s
 => => sha256:a6ac09e4d8a90af2fac86bcd7508777bee5261c602b 7.02kB / 7.02kB  0.0s
 => => sha256:cd17d01e1374373b563865119c75cffe3b317635 38.45MB / 38.45MB  12.2s
 => => sha256:ef0e643bf248fd199792e3f4e26b98e57266dcfd67d23ad 627B / 627B  0.7s
 => => sha256:87875ca4aaca016e0da735fb4b6785f9fd63a7a77d36f46 955B / 955B  0.9s
 => => sha256:2b81c8fa41500bff2d1f86c318adcf43267e5ce28de9c4d 393B / 393B  1.2s
 => => sha256:e9f795af5c8bcaf56f663d3da89be2eea6694ccc9f6 1.21kB / 1.21kB  1.5s
 => => sha256:ca43e9145418883a65e77568935c5a14133c39959b0 1.40kB / 1.40kB  1.8s
 => => extracting sha256:26070551e657534bdf420d43107e85b972b2e8c212413bbb  0.8s
 => => extracting sha256:cd17d01e1374373b563865119c75cffe3b31763542d9975e  0.5s
 => => extracting sha256:ef0e643bf248fd199792e3f4e26b98e57266dcfd67d23ad4  0.0s
 => => extracting sha256:87875ca4aaca016e0da735fb4b6785f9fd63a7a77d36f46a  0.0s
 => => extracting sha256:2b81c8fa41500bff2d1f86c318adcf43267e5ce28de9c4de  0.0s
 => => extracting sha256:e9f795af5c8bcaf56f663d3da89be2eea6694ccc9f623f98  0.0s
 => => extracting sha256:ca43e9145418883a65e77568935c5a14133c39959b0019cf  0.0s
 => [2/2] COPY ./dist /usr/share/nginx/html                                0.3s
 => exporting to image                                                     0.1s
 => => exporting layers                                                    0.1s
 => => writing image sha256:d228f7df875c6d5e50c022be5193047bc2229f796fedd  0.0s
 => => naming to docker.io/library/my-frontend                             0.0s

What's Next?
  1. Sign in to your Docker account → docker login
  2. View a summary of image vulnerabilities and recommendations → docker scout quickview

然后运行:

代码语言:javascript
复制
GithubIireAchao:Downloads achao$ docker run -d -p 8080:80 my-frontend
68c5d3642ea11965b569cd26fa2fbd66368e60c94cf20ba6ba2918f3050f8299
GithubIireAchao:Downloads achao$ 

访问8080即可

本文参与 腾讯云自媒体分享计划,分享自作者个人站点/博客。
原始发表:2024-04-24,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

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

本文参与 腾讯云自媒体分享计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
相关产品与服务
容器服务
腾讯云容器服务(Tencent Kubernetes Engine, TKE)基于原生 kubernetes 提供以容器为核心的、高度可扩展的高性能容器管理服务,覆盖 Serverless、边缘计算、分布式云等多种业务部署场景,业内首创单个集群兼容多种计算节点的容器资源管理模式。同时产品作为云原生 Finops 领先布道者,主导开源项目Crane,全面助力客户实现资源优化、成本控制。
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档