docker创建并访问本地前端

### 使用 Docker 安装 Nginx 并部署前端应用 #### 获取 Nginx 镜像 为了开始，需先获取官方的 Nginx 镜像。这可以通过执行 `docker pull nginx` 来完成，该命令默认下载最新的稳定版 Nginx 镜像[^1]。 对于特定版本的需求，则可以使用带有版本标签的拉取指令，例如 `docker pull nginx:1.21.6` 用于获取指定版本的镜像。 #### 创建并启动 Nginx 容器 一旦拥有所需的 Nginx 镜像，在本地环境中创建一个新的容器实例变得简单。通常情况下，会利用如下命令来运行一个新容器： ```bash docker run --name my-nginx -v /path/to/html:/usr/share/nginx/html:ro -p 80:80 -d nginx ``` 上述命令中 `-v` 参数用来挂载主机上的静态文件目录至容器内的 `/usr/share/nginx/html` 路径下；而 `-p` 则映射了宿主机端口与容器内部的服务端口，使得外部能够访问到由 Nginx 提供的内容[^4]。 #### 准备前端项目资源 构建好的前端应用程序应当被打包成生产环境可用的形式——一般位于项目的根目录下的 `dist` 文件夹内。确保这个文件夹包含了所有必要的 HTML、CSS 和 JavaScript 文件以及其他任何依赖项。 #### 更新配置文件（可选） 如果需要自定义 Nginx 的行为或优化性能参数，可能还需要调整其配置文件。可通过复制现有容器中的配置作为模板来进行修改，并再次将其替换回容器中: ```bash docker cp container_name:/etc/nginx/nginx.conf ./local/path/ # 修改 local/path/nginx.conf 后... docker cp ./local/path/nginx.conf container_name:/etc/nginx/nginx.conf ``` 这里假设 `container_name` 是之前创建的那个 Nginx 容器的名字[^3]。 #### 测试部署成果 最后一步是验证一切设置无误。打开浏览器输入服务器 IP 地址或者域名加上对应的端口号(如果是非标准 HTTP(S) 端口)，应该能看到已成功加载的前端页面。