使用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前端部署的实战就差不多到此了,后续会推出前端自动化部署的方案,如果小伙伴们觉得满意,还请点个关注、收藏、或者赞赞支持一下😁。

相关文章
|
19天前
|
SQL 关系型数据库 数据库
国产数据实战之docker部署MyWebSQL数据库管理工具
【10月更文挑战第23天】国产数据实战之docker部署MyWebSQL数据库管理工具
60 4
国产数据实战之docker部署MyWebSQL数据库管理工具
|
7天前
|
资源调度 前端开发 JavaScript
vite3+vue3 实现前端部署加密混淆 javascript-obfuscator
【11月更文挑战第10天】本文介绍了在 Vite 3 + Vue 3 项目中使用 `javascript-obfuscator` 实现前端代码加密混淆的详细步骤,包括安装依赖、创建混淆脚本、修改 `package.json` 脚本命令、构建项目并执行混淆,以及在 HTML 文件中引用混淆后的文件。通过这些步骤,可以有效提高代码的安全性。
|
9天前
|
缓存 前端开发 搜索推荐
前端性能优化实战:提升网页加载速度
前端性能优化实战:提升网页加载速度
|
18天前
|
前端开发 数据管理 测试技术
前端自动化测试:Jest与Cypress的实战应用与最佳实践
【10月更文挑战第27天】本文介绍了前端自动化测试中Jest和Cypress的实战应用与最佳实践。Jest适合React应用的单元测试和快照测试,Cypress则擅长端到端测试,模拟用户交互。通过结合使用这两种工具,可以有效提升代码质量和开发效率。最佳实践包括单元测试与集成测试结合、快照测试、并行执行、代码覆盖率分析、测试环境管理和测试数据管理。
35 2
|
18天前
|
前端开发 JavaScript 数据可视化
前端自动化测试:Jest与Cypress的实战应用与最佳实践
【10月更文挑战第26天】前端自动化测试在现代软件开发中至关重要,Jest和Cypress分别是单元测试和端到端测试的流行工具。本文通过解答一系列问题,介绍Jest与Cypress的实战应用与最佳实践,帮助开发者提高测试效率和代码质量。
28 2
|
24天前
|
存储 缓存 算法
前端算法:优化与实战技巧的深度探索
【10月更文挑战第21天】前端算法:优化与实战技巧的深度探索
20 1
|
25天前
|
人工智能 资源调度 数据可视化
【AI应用落地实战】智能文档处理本地部署——可视化文档解析前端TextIn ParseX实践
2024长沙·中国1024程序员节以“智能应用新生态”为主题,吸引了众多技术大咖。合合信息展示了“智能文档处理百宝箱”的三大工具:可视化文档解析前端TextIn ParseX、向量化acge-embedding模型和文档解析测评工具markdown_tester,助力智能文档处理与知识管理。
|
25天前
|
缓存 前端开发 JavaScript
前端serverless探索之组件单独部署时,利用rxjs实现业务状态与vue-react-angular等框架的响应式状态映射
本文深入探讨了如何将RxJS与Vue、React、Angular三大前端框架进行集成,通过抽象出辅助方法`useRx`和`pushPipe`,实现跨框架的状态管理。具体介绍了各框架的响应式机制,展示了如何将RxJS的Observable对象转化为框架的响应式数据,并通过示例代码演示了使用方法。此外,还讨论了全局状态源与WebComponent的部署优化,以及一些实践中的改进点。这些方法不仅简化了异步编程,还提升了代码的可读性和可维护性。
|
9天前
|
前端开发 JavaScript 安全
vite3+vue3 实现前端部署加密混淆 javascript-obfuscator
【11月更文挑战第7天】本文介绍了在 Vite 3 + Vue 3 项目中使用 `javascript-obfuscator` 实现前端代码加密混淆的详细步骤。包括项目准备、安装 `javascript-obfuscator`、配置 Vite 构建以应用混淆,以及最终构建项目进行混淆。通过这些步骤,可以有效提升前端代码的安全性,防止被他人轻易分析和盗用。
|
1月前
|
JavaScript 前端开发 Docker
拿下奇怪的前端报错(二):nvm不可用报错`GLIBC_2.27‘‘GLIBCXX_3.4.20‘not Found?+ 使用docker构建多个前端项目实践
本文介绍了在多版本Node.js环境中使用nvm进行版本管理和遇到的问题,以及通过Docker化构建流程来解决兼容性问题的方法。文中详细描述了构建Docker镜像、启动临时容器复制构建产物的具体步骤,有效解决了不同项目对Node.js版本的不同需求。