注意保密主机账号密码,或者 SSH 的私钥。如果暴露给外人,主机有安全风险。远程开发建议个人电脑开发时使用。
# WebStorm 远程开发
# 远程开发
- 安装 WebStorm 软件
- 点击顶部菜单
文件 - 点击子菜单中的
远程开发 - 点击
SSH链接 - 设置 SSH
- 可以选择单独设置的 SSH 链接
- 顶部菜单中
工具 - 选择
启动SSH会话 - 然后按照要求编写凭证即可。
- 直接填写服务器的用户名和 IP 地址
- 默认应该是密码
- 也可以使用私钥登录
这里之后就没有再继续下去了,因为 IDE 对内存的最低要求是 4G。
# 远程部署
- 顶部菜单中
工具 - 选择
部署 - 选择
配置 - 点击左上角
+ , 选择 SFTP , 并自定义一个服务器名字 - 链接部分
- 设置 SSH 配置
- 根路径(放项目的路径)
- Web 服务器 URL(字面意思,访问的地址)
- 映射部分
- 本地路径就是项目的本地路径
- 部署路径 是基于根路径的。通常设置为 "/"。
- Web 路径 (暂时没弄明白)
- 然后部署的动作自行处理
# VS Code 远程开发
- 安装 VS Code 软件
- 安装插件 Remote-SSH
- 点击编辑器左下角有个
>< 符号 - 点击
链接到主机 或 将当前窗口链接到主机 - 点击
添加新的SSH主机…… - 输入
用户名@主机IP地址 ,回车继续;esc 返回 - 选择更新 SSH 的配置文件(我选择了用户下面的.ssh 文件夹)
- 提示
已添加到主机! , 说明已经配置成功了。 | Host 主机IP地址/域名 |
| HostName 主机IP地址/域名 |
| User 用户名 |
- 再次点击编辑器左下角有个
>< 符号 - 就会看到可以连接的主机了,但是需要使用主机密码进行登录。
- 可以通过 SSH 密钥登录,这样就不需要每次链接都输入密码了。🎉关于 SSH 密钥生成与配置生成 SSH 以及 Ubuntu 添加 SSH
- SSH 在主机上配置完成后,调整本机的配置
| Host 主机IP地址/域名 |
| HostName 主机IP地址/域名 |
| User root |
| Port 22 |
| ForwardAgent yes |
| PreferredAuthentications publickey |
| IdentityFile "指定生成的SSH私钥id_rsa的路径" |
- 此时就可以不输入密码链接了。
# 平板电脑远程开发
# 正常部署
服务器安装 code server
- 下载 code server
code server 下载地址
这里没有使用 官方的脚本 国内下载实在太慢了 - 上传到服务器
- 安装 code server
| sudo dpkg -i code-server_$VERSION_amd64.deb |
- 设置密码
| export PASSWORD="YOUR PASSWORD" |
- 启动 code server
| |
| code-server --host= "0.0.0.0" --port="10000" |
| |
| code-server |
code-server 配置文件路径 /root/.config/code-server 可修改端口和密码(直接写就行)
config.yaml | bind-addr: 0.0.0.0:10000 |
| domain: 域名 |
| auth: password |
| password: YOUR PASSWORD |
| cert: false |
- 安全组设置
我是云服务器所以直接配置安全组就行了。开放 code server 的服务端口。如果,不是可以做穿透。
# 相关问题
- 项目运行后,无法访问。
- 提供的 URL 是
http://<code-server-host>:<code-server-port>/proxy/5173/ ,访问后提示 connect ECONNREFUSED 0.0.0.0:5173
解决方案:
- 修改 vite 的配置文件
vite.config.js | export default defineConfig({ |
| plugins: [react()], |
| server:{ |
| host: '0.0.0.0', |
| port: 5713 |
| } |
| }) |
- 安全组中开放 5713 端口
- 访问网站的方式为
http://<code-server-host>:5173/ - 此时就可以了
# Docker 部署
- 安装 docker, 可阅读博文 Docker 相关知识
- 创建容器
| |
| docker create -it -p 10000:10000 --name code-server -v "/root/.ssh/.git_ssh:/root/.ssh/.git_ssh" -v "/root/.config/code-server:/root/.config/code-server" -v "/root/development:/root/development" ubuntu /bin/bash |
- 启动容器
- 拷贝 code-server 安装包
| docker cp code-server_4.22.1_amd64.deb code-server:/root |
- 进入容器
| docker exec -it code-server /bin/bash |
- 安装 code-server 和 git
| dpkg -i code-server_4.22.1_amd64.deb |
| |
| apt-get update |
| |
| apt-get install libcurl4-gnutls-dev libexpat1-dev gettext \ libz-dev libssl-dev |
- 运行 code-server
| nohup code-server |
| code-server & |
- 配置 git ssh
此时,code-server 就可以了
# 相关命令
- 停止容器运行
- 删除容器
3 查看容器列表
- 停止 code-server 运行
| ps -ef | grep code-server |
| kill -9 进程号 |
# 通过 Nginx 代理 code-server
这里就不介绍服务器安装 Nginx 了。
| server { |
| listen 10001; |
| listen [::]:10001; |
| |
| server_name _; |
| |
| gzip on; |
| gzip_comp_level 6; |
| gzip_vary on; |
| gzip_min_length 1000; |
| gzip_proxied any; |
| gzip_types text/plain text/css application/json application/x-javascript application/javascript application/x-httpd-php text/xml application/xml application/xml+rss text/javascript image/jpeg image/gif image/png; |
| gzip_disable "MSIE [1-6]\.(?!.*SV1)"; |
| |
| |
| access_log /etc/nginx/logs/code.access.log; |
| location / { |
| proxy_pass http://0.0.0.0:10001/; |
| proxy_http_version 1.1; |
| proxy_redirect off; |
| proxy_set_header Host $host; |
| proxy_set_header X-Real-IP $remote_addr; |
| proxy_set_header X-Scheme $scheme; |
| proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for; |
| proxy_set_header Accept-Encoding gzip; |
| |
| proxy_set_header Upgrade $http_upgrade; |
| proxy_set_header Connection upgrade; |
| } |
| |
| } |
# Nginx 代理总结
- 国内服务器使用域名需要备案.
- 很重要的问题,就是只要是使用 Nginx 代理后,webscoket 总是断。导致无法使用。
过去无法挽回,未来可以改变,有的人成日殚精竭虑,却掀不起什么风浪,有的人却因一念之差,让世界天翻地覆,这就是命运权重。