这篇博客将介绍 docker 使用 nginx 部署前端项目的两种方式
docker pull nginx
这里先介绍几个关键的路径和配置:
# 默认的配置文件路径
/etc/nginx/nginx.conf
# 一般上面的nginx.conf会引入conf.d/*.conf,所以conf.d目录下的文件都能生效
/etc/nginx/conf.d/default.conf
# 这个是默认的default.conf的项目路径,如下
/usr/share/nginx/html
default.conf
server {
listen 80;
listen [::]:80;
server_name localhost;
#access_log /var/log/nginx/host.access.log main;
location / {
root /usr/share/nginx/html;
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 /usr/share/nginx/html;
}
# proxy the PHP scripts to Apache listening on 127.0.0.1:80
#
#location ~ \.php$ {
# proxy_pass http://127.0.0.1;
#}
# pass the PHP scripts to FastCGI server listening on 127.0.0.1:9000
#
#location ~ \.php$ {
# root html;
# fastcgi_pass 127.0.0.1:9000;
# fastcgi_index index.php;
# fastcgi_param SCRIPT_FILENAME /scripts$fastcgi_script_name;
# include fastcgi_params;
#}
# deny access to .htaccess files, if Apache's document root
# concurs with nginx's one
#
#location ~ /\.ht {
# deny all;
#}
}
以上我们知道,将项目放到 /usr/share/nginx/html/
下就能使用 default.conf 配置了,我们将前端项目假设叫 index.html 复制到改目录下:
cd index.html所在的目录
docker cp index.html mynginx:/usr/share/nginx/html/
127.0.0.1:80
上面配置的是80端口,也可以修改
我们可以将以上所有的操作打包成一个镜像,只需运行镜像就能访问项目,而不需要上面的1/2/3步,这也是 docker 的正确使用方式,这样打包成一个镜像后,你的整个应用(前端项目和 Nginx)变得自包含,依赖关系清晰,更易于移植和部署。
在你的前端项目根目录下创建一个名为 Dockerfile 的文件,用于定义 Docker 镜像的构建过程。
# 使用 Nginx 作为基础镜像
FROM nginx:latest
# 删除默认 Nginx 配置文件
RUN rm -rf /etc/nginx/conf.d/default.conf
# 将本地的 Nginx 配置文件复制到容器中
COPY nginx.conf /etc/nginx/conf.d/
# 将前端项目的静态文件复制到 Nginx 的默认发布目录
COPY dist /usr/share/nginx/html
# 暴露 Nginx 的默认 HTTP 端口
EXPOSE 80
# 启动 Nginx
CMD ["nginx", "-g", "daemon off;"]
在同一目录下创建一个名为 nginx.conf 的 Nginx 配置文件,用于配置 Nginx 服务器。
server {
listen 80;
location / {
root /usr/share/nginx/html;
index index.html;
try_files $uri $uri/ /index.html;
}
# 可以根据需要添加其他配置项
}
在包含 Dockerfile 和 nginx.conf 文件的目录下,执行以下命令构建 Docker 镜像:
docker build -t your-frontend-image .
使用以下命令在 Docker 容器中运行你的前端项目:
docker run -p 8080:80 --name your-frontend-container -d your-frontend-image
这将映射宿主机的 8080 端口到容器的 80 端口,并在后台运行容器。
现在,你可以通过访问 http://localhost:8080 来查看部署在 Docker 中的前端项目。
注意:上述步骤假设你的前端项目构建后的文件位于 dist 目录中。确保根据你的实际项目结构和构建输出调整 Dockerfile 中的路径和文件名。
但是据我所知,前端项目一般不会像这样打包成镜像,因为前端对 nginx 没有那么的依赖,比如,两个人同时开发一个项目,基本就是 node 版本的不同可能会导致环境不同,但是最终都是打包成 dist 静态文件部署到 nginx 上,所以没必要把 nginx 和项目捆绑在一起。
所以,我遇到的前端项目基本就是服务器直接安装 nginx,并不使用 docker,当然用 docker 维护一个Nginx也是不错的选择。
而后端就不一样了,比如 java,本地要依赖 jdk 的版本,服务器也要依赖 jdk 的版本,所以后端更适合将 jdk 这种依赖和项目打包成一个镜像进行发布,这样就不会有环境不一致的问题了。
更多【容器-docker:安装nginx并部署一个前端项目】相关视频教程:www.yxfzedu.com