使用Docker部署前端项目实战教程,该踩的坑我都帮你踩了!(下)

简介: 使用Docker部署前端项目实战教程,该踩的坑我都帮你踩了!

2、部署项目

上面的东西准备好后我们进入上面保存那三个文件的目录frontend-docker,已经在该目录的请忽略。

cd / 
cd frontend-docker
#已经在frontend-docker目录就不用执行这两条命令

构建镜像

1. docker build -f Dockerfile -t my-frontend:v1.0 .
2. #注意最后那个点是必须的,代表当前目录

成功如下:

20210828084810469.png

设置容器运行镜像

docker run -d --name nginx01 -p 3000:80 --restart=always my-frontend:v1.0
# -后台运行
# --name nginx01  设置容器名字叫nginx01
# -p 3000:80 公网ip的3000端口对应该容器的80端口
# --restart=always设置了开机自启
# my-frontend:v1.0 构建的镜像的名字

2021082723492891.png

最后浏览器公网ip:3000就可以打开了,若打开提示无法访问此网站请输入:

1. docker logs nginx01
2. #有报错信息的根据提示修改即可,一般多为前面my-frontend文件夹下的文件内容粘贴少了打头的几个

20210827234817250.png

最后,上面的表示该vue项目已经成功部署! 经过验证重启服务器后仍旧可以正常打开!


这里有一点提个醒,部分浏览器会禁用一些端口,例如谷歌禁用6666等,如果出现下文的情况,请docker run的时候更换端口 !


无法访问此网站


网址为 http://106.126.3.4:6666/ 的网页可能暂时无法连接,或者它已永久性地移动到了新网址。


知识点(需要的可查阅)

容器命令(需要时可查)

常规命令


docker pull **** #下载最新的****
//新建容器运行
docker run [可选参数] imageid
#参数说明 
-d                # 后台方式运行
--name            # 容器名称 用来区分容器,例如nginx01
--restart=always  #开机自启
#下方为端口组合
-p                # 随机指定端口
    -p 主机端口:容器端口(常用)
    -p ip:主机端口容器端口
    -p 容器端口        
    容器的端口
-P
#详见菜鸟教程 or w3c

容器退出删除命令

exit #容器退出
Ctrl+P+Q #不停止推出
docker rm 容器id                  # 删除指定的容器 不能删除正在运行的
docker rm -f $(docker ps -aq)     # 删除所有容器
docker ps -a -q | xargs docker rm # 删除所有容器

启动、停止容器命令

docker start 容器id
docker restart 容器id
docker stop 容器id
docker kill 容器id

更多详细的命令还请大家查阅相关资料,这里不再一一列举。


结束语

以上关于docker前端部署的实战就差不多到此了,后续会推出前端自动化部署的方案,如果小伙伴们觉得满意,还请点个关注、收藏、或者赞赞支持一下😁。

相关文章
|
14天前
|
机器人 网络安全 数据安全/隐私保护
autMan奥特曼机器人-对接Docker版本NTQQ详细教程
本文介绍了如何在服务器上搭建NTQQ机器人,通过官方NTQQ对接各框架,实现QQ登录的稳定运行。文章提到了需要准备一台服务器和相应的软件,并详细描述了通过SSH链接服务器、创建文件夹和配置文件、编辑配置文件地址端口、运行容器等步骤。同时,文章还介绍了VNC连接的使用和配置,以及使用watchtower进行NTQQ的更新。文章总结起来就是在服务器上搭建NTQQ机器人,实现QQ登录的稳定性和自动登录功能,同时提供了更新和维护的方法。
46 3
autMan奥特曼机器人-对接Docker版本NTQQ详细教程
|
5天前
|
前端开发 数据管理 测试技术
前端自动化测试:Jest与Cypress的实战应用与最佳实践
【10月更文挑战第27天】本文介绍了前端自动化测试中Jest和Cypress的实战应用与最佳实践。Jest适合React应用的单元测试和快照测试,Cypress则擅长端到端测试,模拟用户交互。通过结合使用这两种工具,可以有效提升代码质量和开发效率。最佳实践包括单元测试与集成测试结合、快照测试、并行执行、代码覆盖率分析、测试环境管理和测试数据管理。
15 2
|
6天前
|
前端开发 JavaScript 数据可视化
前端自动化测试:Jest与Cypress的实战应用与最佳实践
【10月更文挑战第26天】前端自动化测试在现代软件开发中至关重要,Jest和Cypress分别是单元测试和端到端测试的流行工具。本文通过解答一系列问题,介绍Jest与Cypress的实战应用与最佳实践,帮助开发者提高测试效率和代码质量。
19 2
|
11天前
|
存储 缓存 算法
前端算法:优化与实战技巧的深度探索
【10月更文挑战第21天】前端算法:优化与实战技巧的深度探索
11 1
|
12天前
|
人工智能 资源调度 数据可视化
【AI应用落地实战】智能文档处理本地部署——可视化文档解析前端TextIn ParseX实践
2024长沙·中国1024程序员节以“智能应用新生态”为主题,吸引了众多技术大咖。合合信息展示了“智能文档处理百宝箱”的三大工具:可视化文档解析前端TextIn ParseX、向量化acge-embedding模型和文档解析测评工具markdown_tester,助力智能文档处理与知识管理。
|
12天前
|
缓存 前端开发 JavaScript
前端serverless探索之组件单独部署时,利用rxjs实现业务状态与vue-react-angular等框架的响应式状态映射
本文深入探讨了如何将RxJS与Vue、React、Angular三大前端框架进行集成,通过抽象出辅助方法`useRx`和`pushPipe`,实现跨框架的状态管理。具体介绍了各框架的响应式机制,展示了如何将RxJS的Observable对象转化为框架的响应式数据,并通过示例代码演示了使用方法。此外,还讨论了全局状态源与WebComponent的部署优化,以及一些实践中的改进点。这些方法不仅简化了异步编程,还提升了代码的可读性和可维护性。
|
13天前
|
关系型数据库 MySQL Linux
基于阿里云服务器Linux系统安装Docker完整图文教程(附部署开源项目)
基于阿里云服务器Linux系统安装Docker完整图文教程(附部署开源项目)
129 2
|
21天前
|
数据可视化 数据挖掘 Docker
Docker Desktop 安装 ClickHouse 超级简单教程
Docker Desktop 安装 ClickHouse 超级简单教程
36 1
|
19天前
|
JavaScript 前端开发 Docker
拿下奇怪的前端报错(二):nvm不可用报错`GLIBC_2.27‘‘GLIBCXX_3.4.20‘not Found?+ 使用docker构建多个前端项目实践
本文介绍了在多版本Node.js环境中使用nvm进行版本管理和遇到的问题,以及通过Docker化构建流程来解决兼容性问题的方法。文中详细描述了构建Docker镜像、启动临时容器复制构建产物的具体步骤,有效解决了不同项目对Node.js版本的不同需求。
|
20天前
|
资源调度 前端开发 安全
前端实战:基于Verdaccio搭建私有npm仓库,轻松上传与下载自定义npm插件包
前端实战:基于Verdaccio搭建私有npm仓库,轻松上传与下载自定义npm插件包
34 0