window下安装docker并运行angular项目

news/2024/10/28 0:28:28/

window下安装docker并运行angular项目

1、使用场景

本地有一个node项目,node 版本是 v16.13.2,在本地安装的angular 是 15.2.4

image-20230605085642494

image-20230605085706073

但是测试服上面的node 版本是 14.19.3,angular 是1.0.0-beta.28.3 ,会导致angular项目的 ng build 打包不了。但是不能升级版本,因为这个测试服务器上面的东西也是接手离职同事的,不知道上面都有些啥,所以打算利用docker重新安装一套打包环境

image-20230605090155789

2、下载docker安装

https://www.docker.com/

2.1、进入官网下载docker安装程序,

这个安装程序是默认安装到c盘的,但是c盘的空间不够,我想安装到d盘

image-20230605103113036

2.2、那我们就先建立个软链接,

以管理员的身份打开cmd命令界面,输入以下代码建立软链接

mklink /J "C:\Program Files\Docker" "D:\Program Files\Docker"

,这时我们直接傻瓜式,双击安装程序后点ok即可

image-20230605101001242

这时会报错

Unpacking failed: 未能找到路径“C:\Program Files\Docker\Docker”的一部分。
在 CommunityInstaller.InstallWorkflow.d__30.MoveNext()
— 引发异常的上一位置中堆栈跟踪的末尾 —

image-20230605103953278

2.3、我们需要手动在 d:\Program Files 创建Docker 目录,

这样在c盘上线的链接就能跳转到d盘了,双击后能正常安装了

image-20230605104537158

2.4、安装后启动报错

2.4.1、Docker Desktop requires a newer WSL kernel version.

image-20230609165939434

直接下载更新包后,直接双击,然后傻瓜式下一步即可

image-20230609170408326

2.4.2、Unable to create an instance of Docker.EngineStateListener: Unable to create an instance of Docker.Notifications.SystrayNotifications: Unable to create an instance of Docker.ApiServices.Update.UpdateStateNotifier: 调用的目标发生了异常。

image-20230605111551704

控制面板->程序->启用或关闭Windows功能->把Hyper-v勾上,重启电脑后还不行的话,就卸载重装下,再次重装后成功启动

image-20230606111050785

3、安装node

3.1、在项目的根目录下编写dockerfile,创建一个文件命名为dockerfile,在里面填写以下内容

# 公司angular应用需要这个版本的node
FROM node:16.14.0-stretch
# 安装angular
RUN npm install -g @angular/cli

3.2、在根目录下运行命令创建image

docker build -t angular-app:1 .

这里的1是tag,可以作为版本号

image-20230607103103321

利用 docker images 命令查看是否创建成功

image-20230607103205861

3.3、根据image创建容器

docker run -itd --name test  -v D:\projects\mechanic-pc-angular:/mechanic-pc-angular -p 5201:5201 angular-app:1 /bin/bash

D:\projects\mechanic-pc-angular 是本地的项目路径映射到容器的 /mechanic-pc-angula 路径

  • -d 表示后台运行容器
  • -t 为docker分配一个伪终端并绑定到容器的标准输入上
  • -i 是让容器的标准输入保持打开状态
  • -p 指定映射端口 使用大写的-P参数则会随机选择宿主机的一个端口进行映射
  • -v 是映射本地的路径到容器中

3.4、运行augular项目

 ng serve --port 5201 --host 0.0.0.0

4、验证是否可行

最后在浏览器里面访问http://localhost:5201/#/

image-20230612213742194


http://www.ppmy.cn/news/351314.html

相关文章

Ansible Copy 模块使用详解

Ansible copy模块是用于将文件从控制节点复制到远程服务器的模块。它可以将文件、目录或文本从控制节点复制到远程服务器,也可以创建目标目录。 下面是一些EXAMPLE: - name: Copy a single file to remote hostcopy:src: /path/to/local/file.txtdest:…

HTML文档引入JS模块出现路径问题

文章目录 前言一、错误情况1.three引入2.gsap引入 二、解决办法总结 前言 JS抽离, 引入three模块. LiveServer报错: Uncaught TypeError: Failed to resolve module specifier "three". Relative references must start with either "/", "./"…

搜搜关键词排名查询 - 站长工具

搜搜关键词排名查询 经常去站长工具那里,不过只提供了百度关键词排名功能,没有提供搜搜的关键词排名。 只好自己开发一个,方便自己,也方便他人 功能还在继续完善中,希望有识之士多提建议。 http://so.assoft.net.cn…

批量备案域名查询工具-批量备案域名扫描查询

备案域名查询,怎么批量查询域名是否备案。备案域名有什么用?做SEO的人员都知道,备案域名已经成为SEO优化的基础了。今天给大家分享一款批量查询域名的工具。支持批量备案域名查询,支持是否被强制查询、是否被拦截、还支持批量管理…

qt listwidget 关键字颜色_seo关键字优化工具如何收费

如何收费sj67745eo关键字优化工具,企业经常采用SEO优化,以获得更好的排名和更好的流量自己的网站。搜索引擎优化有哪些方法?或者什么更有效? 任何一个站点,都是无法脱离内容,它是网站建设的基石&#xff0c…

常用SEO查询工具

SEO工作者经常需要一些SEO工具的辅助,比如网站收录查询、PR查询等等,以便节省自己的时间,让SEO变得更加轻松。那么,常用的SEO工具都有哪些呢?今天就介绍一些常用的SEO工具网址,并将其进行分类,希…

关键字排名工具|如何看关键字在搜索引擎的排名

关键字排名工具|如何看关键字在搜索引擎的排名 http://files.cnblogs.com/bestsaler/flash_website_tool.rar 转载于:https://www.cnblogs.com/bestsaler/archive/2010/11/20/1882518.html

搜索引擎优化的关键字工具

关键字的选择会是决定搜索引擎优化项目的成败。选择正确的关键词可以是困难的,因为为了获得尽可能从SEO中受益,您需要找到之间的平衡普及,相关性和竞争。 选择一个热门行业的关键词长期看起来是比较自然,但如果成千上万的其他网站…