首页 > 其他分享 >Next.js 实战开发入门 1 开发环境部署 - 曲速引擎 Warp Drive

Next.js 实战开发入门 1 开发环境部署 - 曲速引擎 Warp Drive

时间:2024-10-16 17:14:35浏览次数:11  
标签:node 曲速 Drive Warp 开发 服务器 nvm 安装 远程

开发目标

我们将构建一个简化版本的财务仪表板,其内容包括:
公共主页、登录页面、受身份验证保护的仪表板页面、用户可以添加、编辑和删除发票

开发环境配置

开发客户端 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的开发

文档不完整?及时更新内容查看下方地址

独立博客 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” 微信公众号

标签:node,曲速,Drive,Warp,开发,服务器,nvm,安装,远程
From: https://www.cnblogs.com/XiaoH160309/p/18470350

相关文章

  • Loading class `com.mysql.jdbc.Driver’. This is deprecated. The new driver class
    原文链接:Loadingclass`com.mysql.jdbc.Driver’.Thisisdeprecated.Thenewdriverclassis`com.mysql.cj.jdbc.Driver’.–每天进步一点点(longkui.site)某日构建springboot项目时,报的错:Loadingclass`com.mysql.jdbc.Driver'.Thisisdeprecated.Thenewdriver......
  • esp32_lvgl_driver小缺陷
    问题背景最近在调试一个新屏幕的过程中,使用LVGL官方的lvgl_esp32_driver驱动,在我这个分辨率比较大(454x454)的屏幕下会出现,在分配完成buff后,若buff过大会出现,在刷屏的时候会这种警告。txdatatransfer>hardwaremaxsupportedlen研究了底层代码后发现在spi_master.c文件......
  • 有关 OneDrive 中 Copilot 的常见问题解答
    很多小伙伴已经用上了OneDrive中的Copilot功能:Copilot重磅更新!OneDrive全新功能炸裂一个技巧实现在SharePoint中使用Copilot针对大家提问比较多的问题,在此做一个汇总:1、OneDrive中的Copilot目前在哪里可用?OneDrive中的Copilot目前在 OneDriveWeb上仅适用于商......
  • idea数据库图形化窗口连接数据库报错:Driver class ‘com.mysql.cj.jdbc.Driver‘ not
    报错信息在idea中数据库图形化窗口中,创建下图数据库连接点击测试连接后,发生报错:Driverclass'com.mysql.cj.jdbc.Driver'notfoundNodriverfilesprovided.报错界面:原因出现此错误的原因通常是数据库驱动程序尚未下载或未正确配置到IDEA中。解决方案......
  • GeoKR系列--Geographical Knowledge-Driven Representation Learning for Remote Sens
    一、abstract1.绝大多数遥感图像仍未标注,想要充分利用这些未标注的图像,本文提出了一种基于地理知识驱动的表示学习方法,使得提升遥感图像的网络性能+减少对标注数据的需求。2.本文将全球地表覆盖产品和与每张遥感图像相关的地理位置视为地理知识,为了消除遥感图像与地理知识之......
  • 【学习记录丨UVM】1.2驱动器driver(1)——最简单的driver及其实例化
    《UVM白皮书》关于driver的介绍一、只有driver——最简单的验证平台UVM是一个库,其中的driver等组件都是派生(extends)自UVM库中的类(class)。类中通过function和task实现组件功能。UVM常用类及树形结构_uvm树-CSDN博客 下边这张图展示了UVM常用的类之间的派生关系。可......
  • #HACKTHEBOX——Driver
    靶机详情靶机地址:10.10.11.106kali地址:10.10.16.4初始侦察与渗透确认kali与靶机之间可以ping通使用nmap进行侦查扫描nmap-sT--min-rate1000-p-10.10.11.106 #以TCP协议,基于当前网络情况,以最低1000的速率进行该IP的全部端口nmap-sT-sC-sV-p80,135,445,598......
  • drive slowly up和slowly drive up
    driveslowlyup和slowlydriveup“Driveslowlyup”和“Slowlydriveup”在语法上都是正确的,但它们的用法和语感稍有不同:1.Driveslowlyup-强调动作“drive”(开车),副词“slowly”修饰“drive”,表示驾驶的速度缓慢。-这种结构通常更自然,用来描述如何进行某个动作时使用较......
  • selenium过webdriver检测
    js/*!*Note:Auto-generated,donotupdatemanually.*Generatedby:https://github.com/berstend/puppeteer-extra/tree/master/packages/extract-stealth-evasions*Generatedon:Sun,13Feb202212:56:05GMT*License:MIT*/(({_utilsFns:_utilsFns......
  • Selenium+WebDriver 各浏览器驱动下载与使用
    Selenium+Python之WebDriver驱动下载与使用一、Firefox(火狐)浏览器驱动下载地址:https://github.com/mozilla/geckodriver/releases/下载对应驱动:根据自己的操作系统下载相对应的驱动。使用方法:把文件存放在python根目录下,例如:C:\xxx\Python\Python38下。(安装最新版......