原因

很晚了，还是记录一下，因为前后端分离，前端工作相对独立，所以前端部署这块也需要了解和掌握，为什么用docker，因为docker很方便，并且不会对服务器造成污染。在进行下面步骤之前，我希望你能提前了解几个比较重要的点 （什么是docker，什么是镜像，什么是容器，宿主机与容器如何挂载<这样做的原因>，以及nginx的一些了解） ，括号中的内容很重要，对于理解下面的步骤起到很关键的作用。

步骤

1.先在服务器拉取nginx的镜像
2.然后通过挂载的方式将宿主机的目录或文件与容器中nginx对应的目录或文件进行挂载并启动
docker run --name college-frontend -d -p 80:80 -v /demo/nginx/log:/var/log/nginx -v /demo/nginx/html:/usr/share/nginx/html -v /demo/nginx/conf/nginx.conf:/etc/nginx/nginx.conf nginx
/demo/nginx是宿主机新建的目录，只需要在宿主机该目录下的conf目录下先建个空的nginx.conf进行映射即可，其他目录在docker启动后刷新即可看到映射好的其他目录。
看着挺长挺唬人，如果你对挂载已经了解那么就很容易理解这么做的原因，这样就可以直接修改宿主机的文件映射到容器中，很方便。（这里要强调的是，因为你用的nginx的版本可能不同，所以不要照抄我的路径映射，需要去dockerhub看对应的文档）
3.如果启动不成功（docker ps可以查看是否启动成功）则说明宿主机的nginx配置文件还没有写好，给出对应的参考

user root;
worker_processes  1;

events {
    worker_connections  1024;
}

http {
    include       mime.types;
    default_type  application/octet-stream;
    sendfile        on;
    keepalive_timeout  65;

    server {
        listen       80;
        server_name  localhost;
        charset utf-8;

        location / {
                root   /usr/share/nginx/html;
                try_files $uri $uri/ /index.html;
                index  index.html index.htm;
        }
        
        location /prod-api/ {
            proxy_set_header Host $http_host;
            proxy_set_header X-Real-IP $remote_addr;
            proxy_set_header REMOTE-HOST $remote_addr;
            proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
            proxy_pass http://后端ip:端口/;
        }

        error_page   500 502 503 504  /50x.html;
        location = /50x.html {
            root   html;
        }
    }
}

ok，你需要重点注意一个地方，root /usr/share/nginx/html; 这里的配置可能是不同的，根据你的nginx镜像的版本来的。

尾声

怎么说呢，现在的环境越来越要求你把全流程都要掌握，数据可视化要会，小程序要会，前端工程化要会，webpack要懂，vite要知道，vue要会，react也要了解，后端最好也懂，会springboot，最好还要懂点springcloud，linux和docker也得了解点，怎么说呢，在软件行业，业务也要学，技术也要学，加油吧少年。
想起了过年和老爷子聊天谈起的一句小时候学过的话：
人最宝贵的是生命，生命每个人只有一次。人的一生应当这样度过：当回首往事的时候，他不会因为虚度年华而悔恨，也不会因为碌碌无为而羞愧；在临终之际，他能够说：‘我的整个生命和全部精力，都献给了世界上最壮丽的事业——为人类的解放而斗争。’

docker前端部署

原因

步骤

尾声