开发目标
我们将构建一个简化版本的财务仪表板,其内容包括:
公共主页、登录页面、受身份验证保护的仪表板页面、用户可以添加、编辑和删除发票
开发环境配置
开发客户端 Windows 10 (不限系统,兼容vscode即可)
开发服务端 Ubuntu 24.04 (不限系统,兼容node即可)
开发工具 Vscode Version: 1.93.1 下载地址
安装和配置开发环境
安装完成vscode 是这个样子的,接下来主要就是使用vscode对网站进行开发
我们这里采用远程开发,网站的服务端使用linux服务器,这样开发好代码能更好的迁移到服务器进行部署,在真实环境中大部分这类服务都是采用linux进行部署,因此这样开发更真实。
这里我们使用Ubuntu 24.04 作为我们的开发服务端,你也可以选择centos 获取其他服务器,不限选择,只要能运行node服务端就行
配置 vscode 远程连接
准备完成开发工具和服务器之后,开始在vscode配置远程开发插件,点击左边插件目录,然后在搜索框里面搜索 Remote - SSH ,点击 Install 即可安装。
安装完成之后,vscode左边栏目会出现,Remote - SSH 的图标
点击上方的+号添加远程服务器连接
这时候我们切换到服务器中,查看服务器的IP地址,在命令行中输入ifconfig,我这台服务器地址为 172.16.100.104
在Vscode 上方提示输入地址栏中输入 ssh [email protected] -A
命令 ssh [email protected] -A 的含义如下:
1.ssh:这是用于安全远程登录的命令,SSH(Secure Shell)协议允许用户安全地访问远程计算机。
2.root:这是要登录的用户账户名。在这个例子中,您正在以 root 用户身份登录。root 是 Linux 系统中的超级用户,具有所有权限。
3. @:这是分隔符,用于将用户名与主机地址分开。172.16.100.104:这是目标主机的 IP 地址,您要连接的远程计算机的地址。
5. -A:这是一个选项,表示启用 SSH代理转发。代理转发允许您在连接到远程主机后,使用本地计算机上的 SSH 密钥进行身份验证,而无需在远程主机上存储密钥。这在需要通过多台主机进行 SSH 连接时非常有用。
输入完成之后,右下角会跳出连接,点击连接即可连接到远程服务器
点击连接之后,一直安装提示点击,直到出现密码,输入密码即可,等待下载服务器配置完整,即可远程连接到服务端
当出现打开目录,而且目录为服务端则为连接成功
配置服务端 nodejs 环境
打开Linux 终端命令行,输入node命令测试,如果已经安装了则下一步,如果没安装则从这里开始进行
使用APT进行安装,这里的命令是Ubuntu的命令 apt install nodejs
,如果centos则 yum install nodejs
在Ubuntu终端输入:node -v
查看版本号
安装完成node 并且查到版本号显示正常之后,发现版本为18.19.1 或者其他,由于node的项目对版本有要求,不同版本会导致各种bug,因此需要固定开发版本,如何在一台机器上面运行多个版本的node,这里我们要按照 nvm 进行切换到lts版本的node
安装 nvm 工具切换node版本
下载nvm安装curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.5/install.sh | bash
如果遇到网络出现问题,则需要使用代理进行下载,如:proxychains curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.5/install.sh | bash
实在没有代理,则可以采用小曲的存储桶下载地址:curl -o- https://pic.dataeast.cn/picture/install_nvm_0.35.9.sh | bash
现在完成之后会出现这样的显示
然后在终端中运行以下命令以加载 nvm:
export NVM_DIR="$HOME/.nvm"
[ -s "$NVM_DIR/nvm.sh" ] && \. "$NVM_DIR/nvm.sh" # This loads nvm
执行完成之后即可使用nvm
安装node 长期支持的版本 v20.17.0 nvm install 20.17.0
, 完成安装之后可以看到切换之后的node版本,未来我们将使用这个版本进行nextjs的开发
文档不完整?及时更新内容查看下方地址
标签:node,曲速,Drive,Warp,开发,服务器,nvm,安装,远程 From: https://www.cnblogs.com/XiaoH160309/p/18470350独立博客 https://www.dataeast.cn/
CSDN博客 https://blog.csdn.net/siberiaWarpDrive
B站视频空间 https://space.bilibili.com/25871614?spm_id_from=333.1007.0.0
关注 “曲速引擎 Warp Drive” 微信公众号