Docker部署前端项目，收藏这篇就够了

前置工作
1、需要准备的东西
一台Centos服务器并连接

我这是演示用的垃圾云，建议大家上阿里云、腾讯云等。

2、连接云服务器
连接服务器看文章： https://blog.csdn.net/qq_32442973/article/details/119840447

安装Docker环境
Docker有两个分支版本：Docker CE和Docker EE，即社区版和企业版。本教程基于CentOS 7安装Docker CE。

1、安装Docker的依赖库。

yum install -y yum-utils device-mapper-persistent-data lvm2

2、添加Docker CE的软件源信息。
docker官方源：

sudo yum-config-manager --add-repo https://download.docker.com/linux/centos/docker-ce.repo

或者使用国内阿里云源（安装太慢/无法安装可以考虑用这个）：

sudo yum-config-manager --add-repo http://mirrors.aliyun.com/docker-ce/linux/centos/docker-ce.repo

出现以下内容则代表设置源成功：

3、安装Docker CE。
可以查看所有仓库中所有docker版本，并选择特定版本安装

yum list docker-ce --showduplicates | sort -r

下面是安装方式

sudo yum install docker-ce #由于repo中默认只开启stable仓库，故这里安装的是最新稳定版 3:20.10.8-3.el7 sudo yum install <FQPN> # 例如：sudo yum install docker-ce-17.12.0.ce

我用第一种安装方式。

4、启动Docker服务。

sudo systemctl start docker # 启动docker sudo systemctl enable docker # 设置开机自启

若不设置开机自启，那么一但服务器宕机或者重启，就得手动输命令重新启动，很麻烦。

准备Dockerfile并部署项目（构建新的业务镜像）
1、准备nginx.conf.template、Dockerfile、dist（前端项目build后的包）
为了方便管理我们统一放在目录frontend-docker下，以下代码段为步骤：

# 第一步 cd / # 第二步 创建文件夹 mkdir frontend-docker # 第三步 cd frontend-docker # 第四步 创建nginx.conf.template并编辑好保存 vi nginx.conf.template #打开编辑贴上下面的文件内容再按 esc 然后 : wq保存 # 第五步 创建Dockerfile文件并编辑好保存 vi Dockerfile #打开编辑贴上下面的文件内容再按 esc 然后 : wq保存 # 第五步 上传vue项目build后的dist文件夹

nginx.conf.template 文件内容

user nginx; #user nobody; worker_processes 1; #error_log logs/error.log; #error_log logs/error.log notice; #error_log logs/error.log info; #pid logs/nginx.pid; events { worker_connections 1024; } http { include 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 logs/access.log main; sendfile on; #tcp_nopush on; #keepalive_timeout 0; keepalive_timeout 65; #gzip on; server { listen 80; server_name localhost; #charset koi8-r; #access_log logs/host.access.log main; location / { root /dist; #try_files $uri /index.html; #解决路由重定向跳转 404 页面配置 index index.html index.htm; } #error_page 404 /404.html; # redirect server error pages to the static page /50x.html # error_page 500 502 503 504 /50x.html; location = /50x.html { root html; } } # another virtual host using mix of IP-, name-, and port-based configuration # #server { # listen 8000; # listen somename:8080; # server_name somename alias another.alias; # location / { # root html; # index index.html index.htm; # } #} # HTTPS server # #server { # listen 443 ssl; # server_name localhost; # ssl_certificate cert.pem; # ssl_certificate_key cert.key; # ssl_session_cache shared:SSL:1m; # ssl_session_timeout 5m; # ssl_ciphers HIGH:!aNULL:!MD5; # ssl_prefer_server_ciphers on; # location / { # root html; # index index.html index.htm; # } #} }

Dockerfile文件内容 （业务镜像构建流程）

FROM nginx:latest RUN mkdir /dist COPY ./dist /dist COPY ./nginx.conf.template / CMD envsubst < /nginx.conf.template > /etc/nginx/nginx.conf \ && cat /etc/nginx/nginx.conf \ && nginx -g 'daemon off;'

该文件里主要是安装了nginx，复制dist、nginx.conf.template、启动nginx的步骤。

注意：你复制粘贴时可能会无意丢掉头部几个单词，注意检查文件内容是否一致。

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

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

构建镜像

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

成功如下：

设置容器运行镜像

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 构建的镜像的名字

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

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

最后，上面的表示该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

2025开年，AI技术打得火热，正在改变前端人的职业命运：

阿里云核心业务全部接入Agent体系；

字节跳动30%前端岗位要求大模型开发能力；

腾讯、京东、百度开放招聘技术岗，80%与AI相关……

大模型正在重构技术开发范式，传统CRUD开发模式正在被AI原生应用取代！

最残忍的是，业务面临转型，领导要求用RAG优化知识库检索，你不会；带AI团队，微调大模型要准备多少数据，你不懂；想转型大模型应用开发工程师等相关岗，没项目实操经验……这不是技术焦虑，而是职业生存危机！

曾经React、Vue等热门的开发框架，已不再是就业的金钥匙。如果认为会调用API就是懂大模型、能进行二次开发，那就大错特错了。制造、医疗、金融等各行业都在加速AI应用落地，未来企业更看重能用AI大模型技术重构业务流的技术人。

如今技术圈降薪裁员频频爆发，传统岗位大批缩水，相反AI相关技术岗疯狂扩招，薪资逆势上涨150%，大厂老板们甚至开出70-100W年薪，挖掘AI大模型人才！

不出1年 “有AI项目开发经验”或将成为前端人投递简历的门槛。

风口之下，与其像“温水煮青蛙”一样坐等被行业淘汰，不如先人一步，掌握AI大模型原理+应用技术+项目实操经验，“顺风”翻盘！

大模型目前在人工智能领域可以说正处于一种“炙手可热”的状态，吸引了很多人的关注和兴趣，也有很多新人小白想要学习入门大模型，那么，如何入门大模型呢？

下面给大家分享一份2025最新版的大模型学习路线，帮助新人小白更系统、更快速的学习大模型！

2025最新版CSDN大礼包：《AGI大模型学习资源包》免费分享**

一、2025最新大模型学习路线

一个明确的学习路线可以帮助新人了解从哪里开始，按照什么顺序学习，以及需要掌握哪些知识点。大模型领域涉及的知识点非常广泛，没有明确的学习路线可能会导致新人感到迷茫，不知道应该专注于哪些内容。

我们把学习路线分成L1到L4四个阶段，一步步带你从入门到进阶，从理论到实战。

L1级别:AI大模型时代的华丽登场

L1阶段：我们会去了解大模型的基础知识，以及大模型在各个行业的应用和分析；学习理解大模型的核心原理，关键技术，以及大模型应用场景；通过理论原理结合多个项目实战，从提示工程基础到提示工程进阶，掌握Prompt提示工程。

L2级别：AI大模型RAG应用开发工程

L2阶段是我们的AI大模型RAG应用开发工程，我们会去学习RAG检索增强生成：包括Naive RAG、Advanced-RAG以及RAG性能评估，还有GraphRAG在内的多个RAG热门项目的分析。

L3级别：大模型Agent应用架构进阶实践

L3阶段：大模型Agent应用架构进阶实现，我们会去学习LangChain、 LIamaIndex框架，也会学习到AutoGPT、 MetaGPT等多Agent系统，打造我们自己的Agent智能体；同时还可以学习到包括Coze、Dify在内的可视化工具的使用。

L4级别：大模型微调与私有化部署

L4阶段：大模型的微调和私有化部署，我们会更加深入的探讨Transformer架构，学习大模型的微调技术，利用DeepSpeed、Lamam Factory等工具快速进行模型微调；并通过Ollama、vLLM等推理部署框架，实现模型的快速部署。

整个大模型学习路线L1主要是对大模型的理论基础、生态以及提示词他的一个学习掌握；而L3 L4更多的是通过项目实战来掌握大模型的应用开发，针对以上大模型的学习路线我们也整理了对应的学习视频教程，和配套的学习资料。

二、大模型经典PDF书籍

书籍和学习文档资料是学习大模型过程中必不可少的，我们精选了一系列深入探讨大模型技术的书籍和学习文档，它们由领域内的顶尖专家撰写，内容全面、深入、详尽，为你学习大模型提供坚实的理论基础。（书籍含电子版PDF）

三、大模型视频教程

对于很多自学或者没有基础的同学来说，书籍这些纯文字类的学习教材会觉得比较晦涩难以理解，因此，我们提供了丰富的大模型视频教程，以动态、形象的方式展示技术概念，帮助你更快、更轻松地掌握核心知识。

四、大模型项目实战

学以致用，当你的理论知识积累到一定程度，就需要通过项目实战，在实际操作中检验和巩固你所学到的知识，同时为你找工作和职业发展打下坚实的基础。

五、大模型面试题

面试不仅是技术的较量，更需要充分的准备。

在你已经掌握了大模型技术之后，就需要开始准备面试，我们将提供精心整理的大模型面试题库，涵盖当前面试中可能遇到的各种技术问题，让你在面试中游刃有余。

因篇幅有限，仅展示部分资料，需要点击下方链接即可前往获取

2025最新版CSDN大礼包：《AGI大模型学习资源包》免费分享