注意保密主机账号密码,或者 SSH 的私钥。如果暴露给外人,主机有安全风险。远程开发建议个人电脑开发时使用。

# WebStorm 远程开发

# 远程开发

  1. 安装 WebStorm 软件
  2. 点击顶部菜单 文件
  3. 点击子菜单中的 远程开发
  4. 点击 SSH链接
  5. 设置 SSH
    • 可以选择单独设置的 SSH 链接
      • 顶部菜单中 工具
      • 选择 启动SSH会话
      • 然后按照要求编写凭证即可。
    • 直接填写服务器的用户名和 IP 地址
      • 默认应该是密码
      • 也可以使用私钥登录

        这里之后就没有再继续下去了,因为 IDE 对内存的最低要求是 4G。

# 远程部署

  1. 顶部菜单中 工具
  2. 选择 部署
  3. 选择 配置
  4. 点击左上角 + , 选择 SFTP , 并自定义一个服务器名字
  5. 链接部分
    • 设置 SSH 配置
    • 根路径(放项目的路径)
    • Web 服务器 URL(字面意思,访问的地址)
  6. 映射部分
    • 本地路径就是项目的本地路径
    • 部署路径 是基于根路径的。通常设置为 "/"。
    • Web 路径 (暂时没弄明白)
  7. 然后部署的动作自行处理

# VS Code 远程开发

  1. 安装 VS Code 软件
  2. 安装插件 Remote-SSH
  3. 点击编辑器左下角有个 >< 符号
  4. 点击 链接到主机将当前窗口链接到主机
  5. 点击 添加新的SSH主机……
  6. 输入 用户名@主机IP地址 ,回车继续;esc 返回
  7. 选择更新 SSH 的配置文件(我选择了用户下面的.ssh 文件夹)
  8. 提示 已添加到主机! , 说明已经配置成功了。
    Host 主机IP地址/域名
    HostName 主机IP地址/域名
    User 用户名
  9. 再次点击编辑器左下角有个 >< 符号
  10. 就会看到可以连接的主机了,但是需要使用主机密码进行登录。
  11. 可以通过 SSH 密钥登录,这样就不需要每次链接都输入密码了。🎉关于 SSH 密钥生成与配置生成 SSH 以及 Ubuntu 添加 SSH
  12. SSH 在主机上配置完成后,调整本机的配置
Host 主机IP地址/域名
HostName 主机IP地址/域名
User root
Port 22
ForwardAgent yes
PreferredAuthentications publickey # 关键
IdentityFile "指定生成的SSH私钥id_rsa的路径" # 关键
  1. 此时就可以不输入密码链接了。

# 平板电脑远程开发

# 正常部署

服务器安装 code server

  1. 下载 code server
    code server 下载地址
    这里没有使用 官方的脚本 国内下载实在太慢了
  2. 上传到服务器
  3. 安装 code server
sudo dpkg -i code-server_$VERSION_amd64.deb # 我是 ubuntu 系统下载 * amd64.deb
  1. 设置密码
export PASSWORD="YOUR PASSWORD"
  1. 启动 code server
# 1. 没处理配置文件启动方式
code-server --host= "0.0.0.0" --port="10000" # 端口不加默认 8080
# 2. 处理了配置文件启动方式
code-server

code-server 配置文件路径 /root/.config/code-server 可修改端口和密码(直接写就行)

config.yaml
bind-addr: 0.0.0.0:10000 # 127.0.0.1 外网无法访问,设置之后可直接通过外网访问,如果有域名的话,应该可以不设置
domain: 域名
auth: password
password: YOUR PASSWORD
cert: false
  1. 安全组设置
    我是云服务器所以直接配置安全组就行了。开放 code server 的服务端口。如果,不是可以做穿透。

# 相关问题

  1. 项目运行后,无法访问。
    • 提供的 URL 是 http://<code-server-host>:<code-server-port>/proxy/5173/ ,访问后提示 connect ECONNREFUSED 0.0.0.0:5173
      解决方案:
    1. 修改 vite 的配置文件
    vite.config.js
    export default defineConfig({
       plugins: [react()],
       server:{
         host: '0.0.0.0',
         port: 5713
       }
    })
    1. 安全组中开放 5713 端口
    2. 访问网站的方式为 http://<code-server-host>:5173/
    3. 此时就可以了

# Docker 部署

  1. 安装 docker, 可阅读博文 Docker 相关知识
  2. 创建容器
# 使用 docker 的时候要把项目代码、SSH(用于 git)、code-server 配置等映射到容器中
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
  1. 启动容器
docker start code-server
  1. 拷贝 code-server 安装包
docker cp code-server_4.22.1_amd64.deb code-server:/root
  1. 进入容器
docker exec -it code-server /bin/bash
  1. 安装 code-server 和 git
dpkg -i code-server_4.22.1_amd64.deb # 我是 ubuntu 系统下载 * amd64.deb
# 更新软件列表
apt-get update
# 安装 git
apt-get install libcurl4-gnutls-dev libexpat1-dev gettext \ libz-dev libssl-dev
  1. 运行 code-server
nohup code-server # 方式一 后台运行 推荐
code-server & # 方式二 后台运行
  1. 配置 git ssh
# 使用 bash
ssh-agent bash
# 通过 bash 设置私钥
ssh-add ~/.ssh/id_rsa_name
# 测试
ssh -T [email protected]

此时,code-server 就可以了

# 相关命令

  1. 停止容器运行
docker stop code-server
  1. 删除容器
docker rm code-server

3 查看容器列表

docker ps -a
  1. 停止 code-server 运行
ps -ef | grep code-server
kill -9 进程号

# 通过 Nginx 代理 code-server

这里就不介绍服务器安装 Nginx 了。

server {
        listen 10001;            #IPV4
        listen [::]:10001;       #IPV6
        server_name _;
        gzip on;
        gzip_comp_level 6; # 压缩级别,范围 1-9
        gzip_vary on;
        gzip_min_length 1000; # 只压缩大于 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)";    # 禁用 IE6 的 Gzip 压缩
        # nginx 请求日志地址
        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;   # 传递 ip
                proxy_set_header   X-Scheme         $scheme;        # 传递协议
                proxy_set_header   X-Forwarded-For  $proxy_add_x_forwarded_for;
                proxy_set_header   Accept-Encoding  gzip;
                # code-server 的 websocket 连接需要 Upgrade、Connection 这 2 个头部
                proxy_set_header   Upgrade          $http_upgrade;
                proxy_set_header   Connection       upgrade;
         }
}

# Nginx 代理总结

  1. 国内服务器使用域名需要备案.
  2. 很重要的问题,就是只要是使用 Nginx 代理后,webscoket 总是断。导致无法使用。

过去无法挽回,未来可以改变,有的人成日殚精竭虑,却掀不起什么风浪,有的人却因一念之差,让世界天翻地覆,这就是命运权重。

阅读次数

请我喝[茶]~( ̄▽ ̄)~*

NIDLH 微信支付

微信支付

NIDLH 支付宝

支付宝