虚拟机 | 如何通过域名访问虚拟机中的Web服务？

文章目录

背景介绍
技术解释
操作实践
- 涉及到的东西：
- 一、部署Nginx
- 二、部署自己的Web程序
- - [1、上传构建好的 dist，编写Dockerfile文件](#1、上传构建好的 dist，编写Dockerfile文件)
  - - 目录结构
    - [Dockerfile 文件](#Dockerfile 文件)
  - 2、Nginx配置文件
  - 3、配置docker-compose.yml
  - 4、编排部署命令
- 三、配置Hosts文件
- 总结

背景介绍

由于，服务器（本地虚拟机）中有多个服务：emqx、minIO以及自行开发的media_bao、pic_bao、iot_vue。
目的：为了简化本地访问服务器中的服务。

解决办法：引入Nginx

通过Docker容器化运行Nginx，目的是为了它的反向代理功能。

技术解释

1、Nginx

nginx（发音为 "engine-x"）是一个高性能的 HTTP 和 反向代理 服务器，同时也可以作为邮件代理服务器和通用的TCP/UDP代理服务器。
特点：稳定性、丰富的功能集、配置简单 和 低资源消耗。

2、Docker

Docker 是一个开源的 容器化平台 。
- 它彻底改变了软件的开发、交付和运行方式。
核心理念
- 将应用程序及其所有依赖打包成一个轻量级、可移植、自包含的标准化单元------容器。

注：

具体使用细节可参考我的另一篇文章：
- 服务器 | Docker应用开发与部署的实践以及阿里云镜像加速配置

操作实践

涉及到的东西：

iot-Vue-container：想要访问的web应用。
Nginx：用作反向代理。（关键）
Docker：容器化部署程序。
Windows系统：通过本地hosts文件，处理ip和域名的映射。

一、部署Nginx

1、拉取镜像

首先，想要快速部署Nginx，那就要拉取镜像。

当然了，不能随便拉取。得找个稳定一些的镜像才行。

bash 复制代码

# 拉取稳定的Nginx镜像
docker pull nginx

2、创建Nginx容器

学过 Docker 的应该都知道，镜像这个东西是不能直接运行起来的。

得通过命令Run出来一个容器。在Run期间，还可以有一些附加操作，比如：

端口配置
数据卷配置
等等

所以，具体的命令如下：

bash 复制代码

# 1、创建配置、日志、文件目录用于挂载
sudo mkdir -p /opt/nginx/{conf,conf.d,html,logs}

# 2、设置目录权限
sudo chmod -R 755 /opt/nginx

# 3、创建容器并运行
docker run -d \
  --name nginx-server \
  -p 80:80 \
  -p 443:443 \
  -v /opt/nginx/conf/nginx.conf:/etc/nginx/nginx.conf \
  -v /opt/nginx/conf.d:/etc/nginx/conf.d \
  -v /opt/nginx/html:/usr/share/nginx/html \
  -v /opt/nginx/logs:/var/log/nginx \
  --restart always \
  nginx

3、验证部署

bash 复制代码

# 查看运行中的容器
docker ps | grep nginx-server

# 查看容器详细信息
docker inspect nginx-server

# 查看容器日志
docker logs nginx-server

经过以上的操作，nginx便部署成功了。离可以使用仅差配置反向代理了。

4、配置文件

shell 复制代码

# ---------------------- begin  无需关注 ---------------------
user  nginx;
worker_processes  auto;

error_log  /var/log/nginx/error.log notice;
pid        /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;

# --------------------------------- end 无需关注 -------------------------------
  
  server {
        listen 80; # 必须是80端口，浏览器访问，默认80端口
        server_name myapp.com; # 自定义域名
        location / {
                # 虚拟机ip:web程序监听的端口
                proxy_pass http://192.168.110.121:9003; 
        }
    }
 
    include /etc/nginx/conf.d/*.conf;
}

二、部署自己的Web程序

编排部署，扩展无压力。所以，果断选择编排部署。

1、上传构建好的 dist，编写Dockerfile文件

插入一些额外信息：tar 命令

bash 复制代码

# 解压到当前目录，.tar.gz 标识压缩
tar -zxvf filename.tar.gz

# 解压到当前目录，.tar 未压缩
tar -xvf filename.tar

# -z	gzip      使用 gzip 解压
# -x	extract   解压/提取
# -v	verbose   详细模式
# -f	file      指定文件

目录结构

Dockerfile 文件

没有后缀名

bash 复制代码

FROM nginx:alpine
COPY nginx.conf /etc/nginx/conf.d/default.conf
COPY dist /usr/share/nginx/html
EXPOSE 80

2、Nginx配置文件

bash 复制代码

server {
    listen 80;
    server_name localhost;

    location / {
        root /usr/share/nginx/html;
        index index.html;
        try_files $uri $uri/ /index.html;  # 支持前端路由 (如 Vue Router, React Router)
    }

   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://192.168.150.101:8200/; 
    }
 }

3、配置docker-compose.yml

yaml 复制代码

version: '3.8'

services:
  iot-vue:
    build:
      context: ./iotVue3 # 构建的内容
    ports:
      - "9003:80"        # 访问 http://localhost:9003
    restart: unless-stopped
    container_name: iot-Vue-container   # 自定义容器名称

4、编排部署命令

bash 复制代码

# 构建，需要和docker-compose.yml处于同级目录
docker compose up -d

# 强制重新构建镜像再启动（代码更新后常用）
docker compose up --build -d

# 停止运行
docker compose down 

# 删除悬空镜像
docker image prune

三、配置Hosts文件

bash 复制代码

# ip与域名映射关系
192.168.110.121       myapp.com

总结

访问 myapp.com，即可跳转Web程序页面。

各位再见！这里是 鳄鱼杆的空间 ，钓......鳄鱼的杆儿！

期待下次再会！

愿你的每一次垂钓之旅都能满载而归。