nginx怎么部署_vue部署到nginx

(3) 2024-09-25 14:23

Hi,大家好,我是编程小6,很荣幸遇见你,我把这些年在开发过程中遇到的问题或想法写出来,今天说一说
nginx怎么部署_vue部署到nginx,希望能够帮助你!!!。

1. 介绍

1.1 介绍

前面福哥带着大家学习了包括PHP、MySQl、Redis、Elasticsearch几个基础服务的搭建方法,还学习了使用docker-compose工具编排这些服务的方法,通过这些基础服务完全可以用来支持基于PHP语言的开发的网站环境了。

这里面有个问题,一台服务器只有一个80端口,如果我们有很多网站都需要通过这个80端口发布怎么办?这里面就会涉及到web服务器的一个技术——虚拟主机技术。虚拟主机就是通过不同的主机名(域名)将多个网站集中部署在一起通过一个80端口发布出去的一种技术,虚拟主机还可以通过不同的端口将多个网站集中部署在一起发布出去,虚拟主机还可以通过不同的子目录将多个网站集中部署在一起发布出去。

能实现这个目的的软件很多,今天福哥就给大家讲讲如何通过Nginx来实现虚拟主机的部署!

1.2 环境

镜像版本

nginx:1.24.0-bullseye

操作系统

CentOS 7 x86_64 2003

服务器

TFCentOS7x64

IP

192.168.168.68

端口

80

2. 安装

2.1 Dockerfile

2.1.1 镜像

福哥选择的是nginx:1.24.0-bullseye这个基础镜像。

https://hub.docker.com/_/nginx/tags?page=1&name=1.24.0-bullseye&ordering=-last_updated

nginx怎么部署_vue部署到nginx_https://bianchenghao6.com/blog__第1张

2.1.2 维护者信息

这是福哥写的维护者信息。

# for MAINTAINER MAINTAINER Author: Andy Bogate MAINTAINER Email: tongfu@tongfu.net MAINTAINER Home page: https://tongfu.net MAINTAINER Datetime: 2023/04/26 MAINTAINER Version: v1.0

2.2 配置文件

2.2.1 nginx.conf

这个是nginx的主配置文件,存储在/etc/nginx/目录下面,原始内容如下:

user  nginx; worker_processes  auto; error_log  /var/log/nginx/error.log notice; pid        /var/run/nginx.pid; events {     worker_connections  1024; } http {     include       /etc/nginx/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  /var/log/nginx/access.log  main;     sendfile        on;     #tcp_nopush     on;     keepalive_timeout  65;     #gzip  on;     include /etc/nginx/conf.d/*.conf; }

这个文件基本不用修改,我们保持原样就行~

2.2.2 default.conf

这个是默认虚拟主机的配置文件,存储在/etc/nginx/conf.d/目录下面,原始内容如下:

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 ~ \.phpnbsp;{
    #    proxy_pass   http://127.0.0.1;
    #}

    # pass the PHP scripts to FastCGI server listening on 127.0.0.1:9000
    #
    #location ~ \.phpnbsp;{
    #    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;
    #}
}

这个配置文件福哥会把它删除掉,然后添加自己的虚拟主机配置文件。

RUN rm -f /etc/nginx/conf.d/default.conf

2.2.3 域名方式

by-host.conf是福哥建立的虚拟主机配置文件,这个配置文件是通过主机名(域名)实现在一个端口下部署多个网站的,访问每个网站需要使用特定的主机名(域名)。

第一个网站使用域名tfphp-by-host.tongfu.net,第二个网站使用域名tfphp-by-host2.tongfu.net,两个网站都指向之前我们搞的php-tfphp这个服务,通过upstream绑定两个网站。

upstream tfphp-by-host {    server php-tfphp:80; } server {    listen 80;    server_name tfphp-by-host.tongfu.net;    location / {         proxy_pass       http://tfphp-by-host;         proxy_redirect   off;         proxy_set_header Host $host;         proxy_set_header X-Real-Ip $remote_addr;         proxy_set_header X-Forwarded-For $remote_addr;          } } server {    listen 80;    server_name tfphp-by-host2.tongfu.net;    location / {         proxy_pass       http://tfphp-by-host;         proxy_redirect   off;         proxy_set_header Host $host;         proxy_set_header X-Real-Ip $remote_addr;         proxy_set_header X-Forwarded-For $remote_addr;          } }

这种方式配置每个网站会有完整的HTTP信息,强烈推荐!

在创建新的镜像的时候把by-host.conf配置文件拷贝进去。

COPY by-host.conf /etc/nginx/conf.d/

2.2.4 端口方式

by-port.conf是福哥建立了又一个虚拟主机配置文件,这个配置文件是通过端口实现多个网站的部署的,这种方式需要多个空闲的服务端口,算是比较省事的做法。

第一个网站使用的是81端口,第二个网站使用的是82端口,,两个网站都指向之前我们搞的php-tfphp这个服务,通过upstream绑定两个网站。

upstream tfphp-by-port {    server php-tfphp:80; } server {    listen 81;    server_name tfphp-by-port.tongfu.net;    location / {         proxy_pass       http://tfphp-by-port;         proxy_redirect   off;         proxy_set_header Host $host;         proxy_set_header X-Real-Ip $remote_addr;         proxy_set_header X-Forwarded-For $remote_addr;          } } server {    listen 82;    server_name tfphp-by-port.tongfu.net;    location / {         proxy_pass       http://tfphp-by-port;         proxy_redirect   off;         proxy_set_header Host $host;         proxy_set_header X-Real-Ip $remote_addr;         proxy_set_header X-Forwarded-For $remote_addr;          } }

这种配置方式每个网站会有完整的HTTP信息,但是php-tfphp并不知道非80端口的存在,一般推荐!

在创建新的镜像的时候把by-port.conf配置文件拷贝进去。

COPY by-port.conf /etc/nginx/conf.d/

2.2.5 子目录方式

by-dir.conf是福哥建立了又一个虚拟主机配置文件,这个配置文件是通过子目录实现多个网站的部署的,这种方式不需要额外的资源,只需要设置不同的子目录就行,是资源比较紧张的情况下的选择。

第一个网站使用的是/dir/子目录,第二个网站使用的是/dir2/子目录,,两个网站都指向之前我们搞的php-tfphp这个服务,通过upstream绑定两个网站。

upstream tfphp-by-dir {    server php-tfphp:80; } server {    listen 80;    server_name tfphp-by-dir.tongfu.net;    location ~ ^\/dir\/(.*)nbsp;{         proxy_pass       http://tfphp-by-dir/$1;         proxy_redirect   off;         proxy_set_header Host $host;         proxy_set_header X-Real-Ip $remote_addr;         proxy_set_header X-Forwarded-For $remote_addr;          }    location ~ ^\/dir2\/(.*)nbsp;{         proxy_pass       http://tfphp-by-dir/$1;         proxy_redirect   off;         proxy_set_header Host $host;         proxy_set_header X-Real-Ip $remote_addr;         proxy_set_header X-Forwarded-For $remote_addr;          } }

这种配置方式网站得到的路径是以子目录为根目录计算的,一般推荐!

在创建新的镜像的时候把by-dir.conf配置文件拷贝进去。

COPY by-dir.conf /etc/nginx/conf.d/

2.3 创建镜像

使用下面的命令创建tfnginx:1.24.0-1.0.0镜像。

docker build -f Dockerfile \ -t registry.tongfu.net:5000/tfnginx:1.24.0-1.0.0 ./
nginx怎么部署_vue部署到nginx_https://bianchenghao6.com/blog__第2张

2.4 查看镜像

看看新的镜像。

docker images | grep tfnginx
nginx怎么部署_vue部署到nginx_https://bianchenghao6.com/blog__第3张

3. 测试

3.1 宿主机程序文件

在tfphp服务的数据目录下面建立一个php程序文件tfnginx.php,写入下面的代码。

<?php var_dump($_SERVER['HTTP_HOST']);

3.2 启动容器

如果你的TFCentOS7x64服务器的php-tfphp服务没有启动的话,请先通过docker-compose把它启动起来,否则后面的测试会有问题!

docker-compose -f /tongfu.net/data/dockerfile/docker-compose.yml up -d
nginx怎么部署_vue部署到nginx_https://bianchenghao6.com/blog__第4张

使用下面的命令基于tfnginx:1.24.0-1.0.0镜像启动一个容器,将80端口和443端口映射到宿主机上面。

docker run -tid \ --name tfnginx \ -h tfnginx \ --net tfnet \ -p 80:80 \ -p 443:443 \ -p 81:81 \ -p 82:82 \ registry.tongfu.net:5000/tfnginx:1.24.0-1.0.0
nginx怎么部署_vue部署到nginx_https://bianchenghao6.com/blog__第5张

3.3 设置hosts解析

在Windows上以管理员权限运行cmd命令行窗口,右键左下角的windows图标选择搜索,在弹出的输入框里面输入“cmd”,最后点击右边的“以管理员身份运行”。

nginx怎么部署_vue部署到nginx_https://bianchenghao6.com/blog__第6张

在打开的cmd窗口里面输入如下命令,以管理员身份打开hosts文件。

notepad drivers\etc\hosts
nginx怎么部署_vue部署到nginx_https://bianchenghao6.com/blog__第7张

在打开的记事本里添加四个刚刚在nginx里面配置的域名。

192.168.168.68      tfphp-by-host.tongfu.net 192.168.168.68      tfphp-by-host2.tongfu.net 192.168.168.68      tfphp-by-port.tongfu.net 192.168.168.68      tfphp-by-dir.tongfu.net
nginx怎么部署_vue部署到nginx_https://bianchenghao6.com/blog__第8张

保存后退出记事本。

3.4 测试Nginx

3.4.1 域名方式

使用tfphp-by-host.tongfu.net域名测试。

nginx怎么部署_vue部署到nginx_https://bianchenghao6.com/blog__第9张

使用tfphp-by-host2.tongfu.net域名测试。

nginx怎么部署_vue部署到nginx_https://bianchenghao6.com/blog__第10张

3.4.2 端口方式

使用81端口测试。

nginx怎么部署_vue部署到nginx_https://bianchenghao6.com/blog__第11张

使用82端口测试。

nginx怎么部署_vue部署到nginx_https://bianchenghao6.com/blog__第12张

3.4.3 子目录方式

使用/dir/子目录测试。

nginx怎么部署_vue部署到nginx_https://bianchenghao6.com/blog__第13张

使用/dir2/子目录测试。

nginx怎么部署_vue部署到nginx_https://bianchenghao6.com/blog__第14张

4. docker-compose管理

镜像测试完成了,接下来我们要把tfnginx交给docker-compose来管理了。

4.1 配置文件

配置文件增加tfnginx的配置信息。

这里面通过depends_on选项设置了tfnginx是依赖php-tfphp服务的,也就是说启动tfnginx服务的时候如果php-tfphp没有启动的话会先启动php-tfphp服务。

  tfnginx:     build:       dockerfile: Dockerfile       context: ./nginx1.24.0     image: registry.tongfu.net:5000/nginx:1.24.0-2.0.0     container_name: tfnginx     ports:       - 80:80       - 443:443       - 81:81       - 82:82     depends_on:       - php-tfphp

4.2 启动

因为刚刚我们手动启动的容器tfnginx占用了端口,所以先要删除tfnginx容器。

docker rm -f tfnginx
nginx怎么部署_vue部署到nginx_https://bianchenghao6.com/blog__第15张

启动docker-compose就可以自动创建nginx镜像自动启动tfnginx容器了。

docker-compose -f /tongfu.net/data/dockerfile/docker-compose.yml up -d
nginx怎么部署_vue部署到nginx_https://bianchenghao6.com/blog__第16张

5. 总结

今天福哥带着大家一起学习了通过nginx:1.24.0-bullseye基础镜像搭建Nginx运行环境的方法。Nginx是最流行的web服务器之一,大部分网站都是使用Nginx作为网站的web服务器软件的,我们要把Nginx玩熟了,玩透了,这样在后面的学习当中才会顺畅!

后面福哥会带着大家学习使用rancher来搭建kubernetes(k8s)服务器集群环境,以及使用rancher环境来部署一系列的服务,相比较docker-compose来说kubernetes可以管理更多的服务器,kubernetes是大型web平台的选择!

https://m.tongfu.net/home/35/blog/514001.html

今天的分享到此就结束了,感谢您的阅读,如果确实帮到您,您可以动动手指转发给其他人。

上一篇

已是最后文章

下一篇

已是最新文章

发表回复