Loading... ## 前言 由于白嫖了几台服务器，不能闲着就搭建了这个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` [](https://pic-1255544886.cos.ap-chongqing.myqcloud.com/blog/Web%20IDE_1.png) 到这里安装算完成了。 ## 使用 #### 导入GitHub上的项目 1. 访问设置好的域名，点击`Show public key`，将显示的代码复制下来。 2. 前往GitHub项目页，也就是你要导入的项目，如图所示 [](https://pic-1255544886.cos.ap-chongqing.myqcloud.com/blog/Web%20IDE_2.png) 点击`Add deploy key` 添加刚刚复制的代码。 记住要勾选“写访问”，也就是红框框里的。 [](https://pic-1255544886.cos.ap-chongqing.myqcloud.com/blog/Web%20IDE_3.png) 3. 将项目的ssh git链接复制粘贴到web ide的框框里就导入成功了。 下图就是运行截图。具体功能就自己去探索吧。 [](https://pic-1255544886.cos.ap-chongqing.myqcloud.com/blog/Web%20IDE_4.png) ## 常见问题 #### 400错误 - 在使用域名访问时，一直卡在“正在加载工作区” - 解决办法 在反向代理配置文件`location /`中添加 ``` proxy_http_version 1.1; proxy_set_header Upgrade $http_upgrade; proxy_set_header Connection "upgrade"; ``` 参考配置文件 ```json 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 © 允许规范转载 Support If you think my article is useful to you, please feel free to appreciate ×Close Appreciate the author Sweeping payments Pay by AliPay Pay by WeChat
