前言

由于白嫖了几台服务器,不能闲着就搭建了这个web ide。方便自己随时随地敲代码。

准备工作

  1. 宝塔面板
  2. 域名
  3. GitHub账号

开始安装

安装docker

在宝塔面板应用商店直接搜索docker安装即可。

安装Web IDE

docker run -p 8080:8080 --name webide webide/webide

前面的8080是docker内部端口,后面的是服务器端口,推荐修改成其他端口避免造成冲突。

设置反代

  1. 将域名解析到服务器
  2. 宝塔新建站点,和刚刚设置的域名匹配
  3. 设置ssl
  4. 设置反向代理
    • 设置代理名随意
    • 设置目标URL:http://localhost:8080

      到这里安装算完成了。

使用

导入GitHub上的项目

  1. 访问设置好的域名,点击Show public key,将显示的代码复制下来。
  2. 前往GitHub项目页,也就是你要导入的项目,如图所示

    点击Add deploy key 添加刚刚复制的代码。
    记住要勾选“写访问”,也就是红框框里的。
  3. 将项目的ssh git链接复制粘贴到web ide的框框里就导入成功了。
    下图就是运行截图。具体功能就自己去探索吧。

常见问题

400错误

  • 在使用域名访问时,一直卡在“正在加载工作区”
  • 解决办法
    在反向代理配置文件location /中添加

    proxy_http_version 1.1;
    proxy_set_header Upgrade $http_upgrade;
    proxy_set_header Connection "upgrade";

    参考配置文件

    location  ~* \.(php|jsp|cgi|asp|aspx)$
    {
    proxy_pass http://localhost:8081;
    proxy_set_header  Host $host:$server_port;
    proxy_set_header  Host             $host;
    proxy_set_header  X-Real-IP        $remote_addr;
    proxy_set_header  X-Forwarded-For  $proxy_add_x_forwarded_for;
    }
    location /
    {
    proxy_pass http://localhost:8081;
    proxy_http_version 1.1;
    proxy_set_header Upgrade $http_upgrade;
    proxy_set_header Connection "upgrade";
    proxy_set_header Host $host;
    proxy_set_header X-Real-IP $remote_addr;
    proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
    proxy_set_header REMOTE-HOST $remote_addr;
    add_header X-Cache $upstream_cache_status;
    
        add_header Cache-Control no-cache;
    expires 12h;
    }
Last modification:February 7th, 2020 at 04:26 pm
If you think my article is useful to you, please feel free to appreciate