不用复杂配置!Portainer+cpolar轻松把本地网站推上公网


文章目录

    • 前言
    • [1. 安装Portainer](#1. 安装Portainer)
      • [1.1 访问Portainer Web界面](#1.1 访问Portainer Web界面)
    • [2. 使用Portainer创建Nginx容器](#2. 使用Portainer创建Nginx容器)
    • [3. 将Web静态站点实现公网访问](#3. 将Web静态站点实现公网访问)
    • [4. 配置Web站点公网访问地址](#4. 配置Web站点公网访问地址)
    • [5. 固定Web静态站点公网地址](#5. 固定Web静态站点公网地址)
    • [6. 固定公网地址访问Web静态站点](#6. 固定公网地址访问Web静态站点)
        • [Portainer 简化了 Nginx 的部署流程,cpolar 打破了局域网的限制,两者结合让本地网站的远程测试和分享变得简单,适合中小团队快速迭代开发。](#Portainer 简化了 Nginx 的部署流程,cpolar 打破了局域网的限制,两者结合让本地网站的远程测试和分享变得简单,适合中小团队快速迭代开发。)

前言

Portainer 是 Docker 的可视化管理工具,能通过网页界面创建、启停容器,监控资源使用,特别适合不太熟悉命令行的开发者。它的优点是操作直观,部署 Nginx 等服务时,不用记冗长的命令,点点鼠标就能完成配置,大大降低了容器管理的门槛。

使用 Portainer 部署 Nginx 时,要注意端口映射不能冲突,本地文件路径和容器内路径要对应好,不然可能访问不到网页。另外,初次登录要设置强密码,保障管理界面的安全。

但问题是,用 Portainer 部署的网站默认只能在局域网内访问,团队成员想远程测试、客户要预览效果都不方便,必须在同一个网络环境里才行,严重影响协作效率。

而 cpolar 内网穿透能解决这个问题,它可以给本地 Nginx 服务生成公网地址,不用买云服务器和域名,通过加密隧道让远程设备安全访问,开发者改完代码,客户立马就能在外地看到效果,协作起来顺畅多了。

接下来,我们将详细介绍如何安装配置 Portainer 和 cpolar,实现 Nginx 服务的可视化部署和公网访问,帮助你构建一个高效、安全的 Web 服务部署流程,即使是 Docker 新手也能轻松上手。

1. 安装Portainer

使用docker部署一个Portainer,首先拉取Portainer镜像

shell 复制代码
docker pull portainer/portainer

然后运行容器,其中: 8098端口是我们要访问的Portainer Web界面

shell 复制代码
docker run -d -p 8098:9000 --restart always -v /var/run/docker.sock:/var/run/docker.sock -v portainer_data:/data portainer/portainer-ce

1.1 访问Portainer Web界面

在浏览器中输入http://localhost:8098 或 http://服务器IP+8098端口号,即可看到Portainer管理界面。

第一次访问时,你需要创建一个管理员账号。填写所需的信息,并设置一个强密码。然后点击"Create user"按钮继续。

2. 使用Portainer创建Nginx容器

登录成功后,你将看到Portainer的控制面板。

本篇文章举例: 这里部署的Web站点是我制作的一个三维立体图像web页面。

源代码地址:https://github.com/ADAMxWANG/three

在左侧导航栏中,选择 Home , 点击 local

然后选中 Containers ,再点击右上角的 Add container

进入新界面:

Name 输入three(可以自定义填写)

Image 输入nginx

host:8089 container:80 外网端口自定义,不能有冲突,容器端口可以重复

点击下方 Volumes ,填写 container (nginx路径/usr/share/nginx/html)和 host (部署站点文件路径),点击Deploy the container拉取镜像

创建成功,并且打开一个新的浏览器输入127.0.0.1:8089,可以看到制作完成的三维立体图像了。

3. 将Web静态站点实现公网访问

上面我们在Portainer中创建了Nginx容器,并部署了Web静态站点,在局域网访问成功。下面我们安装Cpolar内网穿透工具,通过cpolar 转发本地端口映射的http公网地址,我们可以很容易实现远程访问,而无需自己注册域名购买云服务器.下面是安装cpolar步骤

cpolar官网地址: https://www.cpolar.com

  • 使用一键脚本安装命令
shell 复制代码
curl -L https://www.cpolar.com/static/downloads/install-release-cpolar.sh | sudo bash
  • 向系统添加服务
shell 复制代码
sudo systemctl enable cpolar
  • 启动cpolar服务
shell 复制代码
sudo systemctl start cpolar

cpolar安装成功后,在外部浏览器上访问Linux 的9200端口 即:【http://局域网ip:9200】,使用cpolar账号登录(如没有账号,可以点击下面免费注册),登录后即可看到cpolar web 配置界面,结下来在web 管理界面配置即可

4. 配置Web站点公网访问地址

点击左侧仪表盘的隧道管理------创建隧道,创建一个Web三维立体图形站点的的cpolar公网地址隧道。

  • 隧道名称:可自定义命名,注意不要与已有的隧道名称重复
  • 协议:选择http
  • 本地地址:8089(本地访问时的端口)
  • 域名类型:免费选择随机域名
  • 地区:选择China Top

点击创建

隧道创建成功后,点击左侧的状态------在线隧道列表,查看所生成的公网访问地址,有两种访问方式,一种是http 和https

4.1公网访问Web站点

复制cpolar生成的两个公网地址中的任意一个,然后打开一个新的浏览器并粘贴地址,可以看到用cpolar生成的公网地址,成功的实现公网访问web站点。

为了更好地演示,我们在前述过程中使用了cpolar生成的隧道,其公网地址是随机生成的。

这种随机地址的优势在于建立速度快,可以立即使用。然而,它的缺点是网址由随机字符生成,不太容易记忆(例如:234b53d8.r1.cpolar.top),制作网页发布公网分享给别人看起来不太美观。另外,这个地址在24小时内会发生随机变化,更适合于临时使用。

我一般会使用固定二级子域名,原因是我希望制作好web网页分享给别人看时,它是一个固定、易记的公网地址(例如:three.cpolar.cn),这样更显正式,便于交流协作。

5. 固定Web静态站点公网地址

由于以上使用cpolar所创建的隧道使用的是随机公网地址,24小时内会随机变化,不利于长期远程访问。因此我们可以为其配置二级子域名,该地址为固定地址,不会随机变化【ps:cpolar.cn已备案】

注意需要将cpolar套餐升级至基础套餐或以上,且每个套餐对应的带宽不一样。

登录cpolar官网,点击左侧的预留,选择保留二级子域名,设置一个二级子域名名称,点击保留,保留成功后复制保留的二级子域名名称

保留成功后复制保留成功的二级子域名的名称

返回登录Cpolar web UI管理界面,点击左侧仪表盘的隧道管理------隧道列表,找到所要配置的隧道,点击右侧的编辑

修改隧道信息,将保留成功的二级子域名配置到隧道中

  • 域名类型:选择二级子域名
  • Sub Domain:填写保留成功的二级子域名
  • 地区:China VIP

点击更新(注意,点击一次更新即可,不需要重复提交)

更新完成后,打开在线隧道列表,此时可以看到公网地址已经发生变化,地址名称也变成了固定的二级子域名名称的域名

6. 固定公网地址访问Web静态站点

最后,我们使用固定的公网地址可以看到访问成功,这样一个固定且永久不变的公网地址就设置好了,随时随地都可以自定义域名并且分享给其他人访问你制作的web站点了!

Portainer 简化了 Nginx 的部署流程,cpolar 打破了局域网的限制,两者结合让本地网站的远程测试和分享变得简单,适合中小团队快速迭代开发。

本篇文章知识点来源cpolar官网https://www.cpolar.com

  1. cpolar博客:配置二级子域名: https://www.cpolar.com/blog/configure-the-secondary-subdomain-name
  2. cpolar博客:配置自定义域名: https://www.cpolar.com/blog/configure-your-own-domain-name
  3. cpolar博客:配置固定TCP端口地址: https://www.cpolar.com/blog/configure-fixed-tcp-port-address
  4. cpolar博客:配置固定FTP地址: https://www.cpolar.com/blog/configure-fixed-ftp-address
相关推荐
cpolar技术支持1 天前
第三方平台回调总说收不到?把本机 Webhook 收单页跑通,用 cpolar 固定二级子域名给对面看实时请求
node.js·内网穿透·webhook·cpolar·回调对接
Xxtaoaooo1 天前
NocoDB在线表格数据库:fnOS部署、MySQL可视化与远程协作实操
数据库·mysql·docker·cpolar·nocodb
java_logo1 天前
Docker 部署 Portainer CE:轻松搭建容器管理平台
运维·docker·容器·portainer·容器管理·轩辕镜像·portainer-ce
承渊政道1 天前
CentOS 7单机部署Elasticsearch 7.17.29:从启动报错、CRUD验证到固定公网地址的完整过程
linux·elasticsearch·centos·内网穿透·cpolar·单机部署
承渊政道4 天前
自建服务越来越多怎么管理?Docker部署Flare,搭一个自己的数字入口
运维·docker·容器·内网穿透·cpolar·nas·flare
cpolar技术支持4 天前
喜欢的直播总要蹲点?用 bililive-go 在 NAS 后台自动录制直播并远程管理,再用 cpolar 让外地也能看回放
内网穿透·cpolar·nas·远程访问·自托管
cpolar技术支持8 天前
外网测试机的异常传不回内网?自托管 Sentry,用 cpolar 打通错误上报链路
python·nginx·docker·cpolar·sentry
cpolar技术支持8 天前
Spring Boot 接口本地正常,异地前端却报跨域?用 cpolar 跑通 CORS 预检与白名单
java·springboot·cpolar·前后端分离·cors
cpolar技术支持11 天前
本地数据库客户端只能自己用?用 cpolar 安全访问 NAS 上的 PostgreSQL 管理台
postgresql·内网穿透·cpolar·nas·pgadmin
cpolar技术支持16 天前
服务器上的 Nginx 只想改配置却不敢动?把 Nginx-UI 跑起来,用 MCP 让 AI 助手帮你安全改配置,再用 cpolar 把面板短时开给自己
nginx·ai·cpolar·mcp·nginx-ui