Docker部署nginx和前端项目

已于 2023-09-04 16:23:15 修改
阅读量2.5k 收藏 45
点赞数 13
分类专栏： docker nginx 前端部署 文章标签： docker nginx java 前端 容器 linux
于 2023-08-09 14:32:19 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/dongcsdn123/article/details/132183354
版权
本文详细介绍了如何使用Docker镜像部署Nginx，包括创建工作目录、启动和配置容器、挂载文件、访问验证以及处理权限和防火墙设置。还涉及前端项目部署和Nginx配置的修改过程。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

1. nginx镜像部署(准备工作)

 1.1、创建nginx工作目录

#需要一个conf文件存放目录，和html文件目录,及日志存放目录

1. mkdir -p /data/applications/nginx/conf

2. mkdir -p /data/applications/nginx/html

3. mkdir -p /data/logs

 1.2、 启动nginx容器，如果这个镜像本机中没有，会自动下载镜，我这下载是的1.18版本

docker run --name nginx -p 80:80 -d nginx:1.18.0

 1.3、复制容器中配置文件目录到本机中，然后删除该容器

# 复制配置
docker cp nginx:/etc/nginx/nginx.conf /data/applications/nginx/conf/nginx.conf
docker cp nginx:/etc/nginx/conf.d /data/applications/nginx/conf/conf.d
docker cp nginx:/usr/share/nginx/html /data/applications/nginx/
 
#先用 [docker ps – a] 命令 找到对应容器ID
#才可以删除容器
docker rm -f [容器ID]
 

1.4、启动新的nginx容器 

docker run -d \
-p 80:80 \
-p 443:443 \
--name nginx \
--restart=always \
--network-alias nginx \
-e TZ="Asia/Shanghai" \
-v /data/applications/nginx/conf/nginx.conf:/etc/nginx/nginx.conf \
-v /data/applications/nginx/conf/conf.d:/etc/nginx/conf.d \
-v /data/logs/nginx:/var/log/nginx \
-v /data/applications/nginx/html:/usr/share/nginx/html \
-v /data/applications/nginx/cert:/etc/nginx/cert \
nginx:1.18.0

按照自己的需求进行挂载

创建启动容器后如果无法访问检查firewalld防火墙是否关闭，或者端口是否开启，以及服务器的安全组是否配置！

命令说明：

在Docker中，如果容器需要访问主机上的设备或系统功能，则需要使用--privileged=true参数。该参数启用特权模式，使容器可以绕过某些安全限制，并访问主机的设备和文件系统。

例如，如果我们要启动一个容器，使用主机的/dev/sda设备作为容器的磁盘，我们需要使用--privileged=true参数来访问该设备

--privileged=true # 容器内访问主机被赋予root权限

-v /data/applications/nginx/html:/usr/share/nginx/html # 挂载的静态文件目录

-v /data/applications/nginx/nginx.conf:/etc/nginx/nginx.conf # 挂载的nginx配置文件

-v /data/applications/nginx/conf/conf.d:/etc/nginx/conf.d # 挂载nginx配置文件,nginx.conf中include引入了conf.d, 如果配置了conf.d也需要挂载,不适用conf.d也可不挂载

-v /data/applications/nginx/logs:/var/log/nginx #挂载nginx日志文件目录到主机logs下

-v /data/applications/nginx/cert: /etc/nginx/cert # ssl证书挂载目录, 按需挂载

-e TZ="Asia/Shanghai  # 指定docker容器的时区

注意:

如果不需要配置证书可以直接挂载这几个配置文件启动

docker run -d -p 90:90 --name nginx-container -e TZ="Asia/Shanghai" \
 -v /home/yqhq/docker-nginx/conf/nginx.conf:/etc/nginx/nginx.conf \
 -v /home/yqhq/docker-nginx/conf/conf.d:/etc/nginx/conf.d \
 -v /home/yqhq/docker-nginx/logs/nginx:/var/log/nginx \
 -v /home/yqhq/docker-nginx/html:/usr/share/nginx/html \
 nginx:1.18.0

1.5、查看容器后，访问服务器ip地址（检验是否启动成功）

     # 查看nginx容器的启动状态是否为UP正在运行状态

  1. docker ps -a   (查所有容器, docker ps 查正在运行容器)

1.6 访问ip+端口成功

2. 使用docker启动nginx部署前端项目

1、将前端打包好的dist目录拷贝到/data/applications/nginx/html/ 目录下边如

/data/applications/nginx/html/dist

2、修改/data/applications/nginx/nginx.conf配置文件如

#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;
    gzip on;
    gzip_min_length 1k;     # 设置允许压缩的页面最小字节数
    gzip_buffers 4 16k;     # 用来存储 gzip 的压缩结果
    gzip_http_version 1.1;  # 识别 HTTP 协议版本
    gzip_comp_level 2;      # 设置 gzip 的压缩比 1-9。1 压缩比最小但最快，而 9 相反
    gzip_types gzip_types text/plain text/css application/json application/javascript text/xml application/xml application/xml+rss text/javascript; # 指定压缩类型
    gzip_proxied any;       # 无论后端服务器的 headers 头返回什么信息，都无条件启用压缩
    server {
        listen       80;
        server_name  127.0.0.1; # !!! 换成自己的ip

        #charset koi8-r;

        #access_log  logs/host.access.log  main;

        location / { ## 前端项目
            root   /usr/share/nginx/html/dist; # 重要!!! 配置docker容器中的路径
            index  index.html index.htm;
            try_files $uri $uri/ /index.html;
        }
        location /api/{
            proxy_pass http://127.0.0.1:8081/; ## 重要！！！proxy_pass 需要设置为后端项目所在服务器的 IP
            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;

        }
        location /admin-api/ { ## 后端项目 - 管理后台
            proxy_pass http://127.0.0.1:8082/admin-api/; ## 重要！！！proxy_pass 需要设置为后端项目所在服务器的 IP
            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;
        }

  
    #location / {
         #   root   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   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;
        #}
    }


    # 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;
 #    location / {
    #        root   html;
    #        index  index.html index.htm;
    #    }
    #}

}
 

 3、修改后保存并退出，重新启动nginx容器

  1. 先用 [docker ps – a] 命令 找到对应容器ID

  2. docker restart [容器ID]

 4.4、查看容器（是否启动成功）

docker ps -a

5.5、再次访问配置的nginx ip + 端口, 出现前端项目页面即成功

在docker上部署nginx前端项目
m0_47250414的博客
04-16 692
一、pull下载nginx镜像包 docker pull nginx 二、查看nginx镜像里面配置文件、日志等文件的具体位置 1、列出容器内当前所有文件夹 ls -l 2、找到镜像中nginx.conf配置文件路径/etc/nginx/nginx.conf ls -l /etc/nginx/ 3、找到default.conf配置文件的路径/etc/nginx/conf.d/default.conf 4、找到默认首页文件夹html路径/usr/share/nginx/html 三、在linux系统中创
docker 搭建 nginx 部署前端项目
锦年的博客
01-04 1956
本文主要介绍如何使用docker安装nginx，以及如何将前端打包好的vue项目部署到nginx上。–name nginx-test：容器名称（自定义的）-p 8080:80：端口进行映射，将本地 8080 端口映射到容器内部的 80 端口。-d nginx：设置nginx容器在后台一直运行。
docker 部署多个前端vue项目
Gblfy_Blog
11-27 4096
docker 部署多个前端vue项目
使用 Docker 部署前端项目全攻略
嗨，欢迎来到我的 优快云 博客小天地！一名深耕多年的技术发烧友。在这里，我将把日常工作中积累的宝贵经验，从复杂架构设计的精妙之处，到代码优化的实战技巧，毫无保留地分享给大家。
03-15 2042
使用 Docker 部署前端项目全攻略
Docker 安装 Nginx 容器部署前端项目
FLGB
03-19 4111
docker运行nginx镜像时，设置端口映射，则只有该映射端口起作用，nginx配置的其他端口无效。所以想要多个端口起效果，启动时要用–net host （先删除容器后重新生成），并且修改配置文件中的root路径，再次访问成功加载首页。docker下的nginx只能读到挂载路径下面的文件（到对应目录下查看文件已经存在了（划红线的）删除成功后，重新生成容器并进行目录挂载映射。我们拉去1.24.0的nginx镜像。在对应挂在目录下创建监听文件。
docker安装nginx，部署多个前端项目在同一个server中去配置，设置后端接口转发
chen的博客
09-24 982
docker安装nginx，部署多个前端项目在同一个server中去配置，设置后端接口转发
Docker Nginx 运行多个前端项目
he_wen_jian的专栏
08-17 811
【代码】Docker Nginx 运行多个前端项目。
docker部署nginx,挂载多个前端部署目录以及跨域问题解决方案.txt
05-28
为了节约成本，很多时候一台server 的nginx可能要部署多个前端的情况，本实例是在docker环境下部署两个前端，同时处理前端调用后端跨域问题，本示例为阿里云centos7 系统docker20.10.6环境下nginx1.19.5版本 ...
Docker利用Nginx部署前端项目
尽我所能，分享开发问题的解决方式
10-27 7443
Dockerfile左侧的dist文件夹就是你前端项目存放的文件夹、nginx.conf.template文件中设置了首页跳转index等，使用时记得改成自己所需的；注：如果是linux系统，先找个位置创建文件夹，然后利用可视化窗口将三个文件全部拉到刚刚创建的文件夹下即可。--p：端口号，左侧为外网访问端口，右侧为内部映射端口，与nginx.conf.template的监听端口默认80一样即可。到此为止，你的项目就成功部署到Docker中的Nginx中了，撒花*★,°*:.☆(￣▽￣)/$:*.°★*。
docker 安装 nginx 部署Vue前端项目
最新发布
weixin_48568302的博客
03-18 1243
docker 安装 nginx 部署Vue前端项目
Docker利用Nginx部署前端项目2
尽我所能，分享开发问题的解决方式
12-20 861
通过了解nginx配置文件，nginx默认的nginx.conf文件自动加载了conf.d文件夹的全部配置文件，因此我们可以不用像之前那样直接配置nginx.conf文件，直接重写default.conf文件就可以了，比之前的方法更加简单易懂。之前的方法是修改了nginx.conf配置文件，通过之后的深入了解，发现Nginx中还有一个default.conf配置文件也可以帮我们来搭建前端，而且我这里还携带了反向代理，可能不是很好用，建议验证后使用。其他未解释的变量都是默认的，不用动。
使用docker部署nginx前后端解决跨域问题.docx
03-05
使用docker部署nginx前后端解决跨域问题
【Docker】docker+Nginx部署前端项目
前端学习博客
09-21 6560
命令的意思是将 Nginx 目录下的 default.conf 复制到 etc/nginx/conf.d/default.conf，用本地的 default.conf 配置来替换 Nginx 镜像里的默认配置。下面的配置直接照抄就好，特别注意，监听的端口号并不需要动，这里的80端口指的是容器的端口，最后我们会将容器的端口映射到我们宿主服务器的端口，比如映射到8888端口。这里镜像中的目录我们不要动，但需要保证我们项目的打包目录是。后面的test是我们构建的镜像的名称，我们可以在云服务器中的安全组进行设置。
Docker 安装 Nginx 部署前端项目_docker安装nginx
2401_89191903的博客
12-17 615
it以交互式进入容器 ，bash保留为容器终端的输入形式，所以结合起来就是进入容器终端并且的保留为容器终端的输入形式(-it和bash的结合作用)是nginx的主配置文件，具体内容留在后一章节再说吧。下的default.conf 就是默认 server 配置。
docker系列之nginx部署vue前端项目
qq_24392951的博客
03-27 1658
docker系列之nginx部署vue前端项目 1、（1）启动nginx容器同时把目录挂载到宿主机，这样在宿主机修改代码，修改配置文件等都会及时同步到nginx中,非常方便 启动nginx成功！ （2）可以查看宿主机和容器的挂载详情，使用命令： docker ps 查看containerId docker inspect containerId 2、npm run build 打包vue项...
2.6 Docker部署多个前端项目
m0_74055560的博客
05-30 834
原因：以防nginx.conf格式是文件夹导致挂载失败。前台网页：47.120.15.23:9090。后台网页：47.120.15.23:9091。
四十五、docker之nginx手动部署前端项目
Sean_0819的博客
04-09 1875
我们查看上述说的 conf文件中 location 里 root /usr/share/nginx/html # root是指文件的根目录。我们看到最下面一行include /etc/nginx/conf.d/*.conf ，所以我们再把此目录下的conf文件复制过来看下是啥意思。www.hhxpython.com/aaa.txt 返回/usr/share/nginx/html/aaa.txt。root /usr/share/nginx/html # root是指文件的根目录。
无域名情况下，Docker+nginx部署多个前端模块
violet_forever_的博客
07-13 573
nginx不使用域名部署多个前端项目。在使用Docker运行时，注意指定需要映射的端口。使用多个 '-p' 参数可注定多个端口映射。①如果访问http://服务器ip/ 后，日志。使用以下命令查看nginx日志。，请检查相应的端口是否已开放。检查前端资源路径是否正确配置。注意不要写错前端资源路径。
nginx+docker部署前端项目
yzsn_wjc的博客
06-30 1657
前端项目使用 docker+nginx部署项目
docker 部署nginx 部署前端项目
08-12
您好！要在Docker中部署Nginx和前端项目，您可以按照以下步骤进行操作： 1. 首先，确保您已经安装了Docker。如果没有安装，请根据您的操作系统进行安装。 2. 创建一个新的文件夹，用于存放您的前端项目文件。假设您将其命名为"my-frontend"。 3. 在"my-frontend"文件夹中创建一个名为"Dockerfile"的文件，并将以下内容添加到文件中： ``` # 使用Nginx作为基础镜像 FROM nginx # 将前端项目文件复制到Nginx的默认网站目录 COPY . /usr/share/nginx/html # 可选：如果您的前端项目需要使用特定的Nginx配置文件，可以将配置文件复制到/etc/nginx/conf.d/目录下 # 暴露Nginx默认的80端口 EXPOSE 80 # 启动Nginx CMD ["nginx", "-g", "daemon off;"] ``` 4. 将您的前端项目文件复制到"my-frontend"文件夹中。 5. 打开命令行终端，并导航到"my-frontend"文件夹。 6. 构建Docker镜像。在命令行中运行以下命令： ``` docker build -t my-frontend-image . ``` 这将根据"Dockerfile"中的配置构建一个名为"my-frontend-image"的Docker镜像。请确保在命令末尾的"."表示当前目录。 7. 运行Docker容器。在命令行中运行以下命令： ``` docker run -d -p 80:80 my-frontend-image ``` 这将在后台运行一个名为"my-frontend-container"的Docker容器，并将宿主机的80端口映射到容器的80端口。 现在，您的前端项目已经通过Nginx成功部署在Docker中了。您可以通过访问http://localhost 来查看您的项目。 请注意，上述步骤假设您的前端项目不需要任何特殊的Nginx配置。如果您的项目需要自定义Nginx配置，请将配置文件复制到"Dockerfile"中指定的目录，并相应地修改配置文件的名称和路径。 希望这能对您有所帮助！如果您有任何其他问题，请随时提问。
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值