Next.js 实战开发入门 1 开发环境部署 - 曲速引擎 Warp Drive
<h2 id="开发目标" data-source-line="3">开发目标</h2><p data-source-line="4">我们将构建一个简化版本的财务仪表板，其内容包括：<br>公共主页、登录页面、受身份验证保护的仪表板页面、用户可以添加、编辑和删除发票<br><img src="https://pic.dataeast.cn/picture/20240929114738.png?ynotemdtimestamp=1728887240937" data-processed="https%3A%2F%2Fpic.dataeast.cn%3A443%2Fpicture%2F20240929114738.png"></p>
<h2 id="开发环境配置" data-source-line="9">开发环境配置</h2>
<p data-source-line="10">开发客户端 Windows 10 (不限系统，兼容vscode即可)<br>开发服务端 Ubuntu 24.04 (不限系统，兼容node即可)<br>开发工具 Vscode Version: 1.93.1 下载地址</p>
<h2 id="安装和配置开发环境" data-source-line="14">安装和配置开发环境</h2>
<p data-source-line="15">安装完成vscode 是这个样子的，接下来主要就是使用vscode对网站进行开发<br><img src="https://pic.dataeast.cn/picture/20240927173503.png?ynotemdtimestamp=1728887240937" data-processed="https%3A%2F%2Fpic.dataeast.cn%2Fpicture%2F20240927173503.png"></p>
<p data-source-line="18">我们这里采用远程开发，网站的服务端使用linux服务器，这样开发好代码能更好的迁移到服务器进行部署，在真实环境中大部分这类服务都是采用linux进行部署，因此这样开发更真实。</p>
<p data-source-line="20">这里我们使用Ubuntu 24.04 作为我们的开发服务端，你也可以选择centos 获取其他服务器，不限选择，只要能运行node服务端就行<br><img src="https://pic.dataeast.cn/picture/20240927173915.png?ynotemdtimestamp=1728887240937" data-processed="https%3A%2F%2Fpic.dataeast.cn%2Fpicture%2F20240927173915.png"></p>
<h2 id="配置-vscode-远程连接" data-source-line="23">配置 vscode 远程连接</h2>
<p data-source-line="24">准备完成开发工具和服务器之后，开始在vscode配置远程开发插件，点击左边插件目录，然后在搜索框里面搜索 Remote - SSH ，点击 Install 即可安装。<br><img src="https://pic.dataeast.cn/picture/20240927175142.png?ynotemdtimestamp=1728887240937" data-processed="https%3A%2F%2Fpic.dataeast.cn%2Fpicture%2F20240927175142.png"></p>
<p data-source-line="27">安装完成之后，vscode左边栏目会出现，Remote - SSH 的图标<br><img src="https://pic.dataeast.cn/picture/20240927175257.png?ynotemdtimestamp=1728887240937" data-processed="https%3A%2F%2Fpic.dataeast.cn%2Fpicture%2F20240927175257.png"></p>
<p data-source-line="30">点击上方的+号添加远程服务器连接<br><img src="https://pic.dataeast.cn/picture/20240927175419.png?ynotemdtimestamp=1728887240937" data-processed="https%3A%2F%2Fpic.dataeast.cn%2Fpicture%2F20240927175419.png"></p>
<p data-source-line="33">这时候我们切换到服务器中，查看服务器的IP地址，在命令行中输入ifconfig,我这台服务器地址为 172.16.100.104<br><img src="https://pic.dataeast.cn/picture/20240927175517.png?ynotemdtimestamp=1728887240937" data-processed="https%3A%2F%2Fpic.dataeast.cn%2Fpicture%2F20240927175517.png"></p>
<p data-source-line="36">在Vscode 上方提示输入地址栏中输入 <code>ssh root@172.16.100.104 -A</code></p>
<pre><code data-source-line="37">命令 ssh root@172.16.100.104 -A 的含义如下：
1.ssh：这是用于安全远程登录的命令，SSH（Secure Shell）协议允许用户安全地访问远程计算机。
2.root：这是要登录的用户账户名。在这个例子中，您正在以 root 用户身份登录。root 是 Linux 系统中的超级用户，具有所有权限。
3. @：这是分隔符，用于将用户名与主机地址分开。172.16.100.104：这是目标主机的 IP 地址，您要连接的远程计算机的地址。
5. -A：这是一个选项，表示启用 SSH代理转发。代理转发允许您在连接到远程主机后，使用本地计算机上的 SSH 密钥进行身份验证，而无需在远程主机上存储密钥。这在需要通过多台主机进行 SSH 连接时非常有用。
</code></pre>
<p data-source-line="44">输入完成之后，右下角会跳出连接，点击连接即可连接到远程服务器<br><img src="https://pic.dataeast.cn/picture/20240927180326.png?ynotemdtimestamp=1728887240937" data-processed="https%3A%2F%2Fpic.dataeast.cn%2Fpicture%2F20240927180326.png"><br>点击连接之后，一直安装提示点击，直到出现密码，输入密码即可，等待下载服务器配置完整，即可远程连接到服务端<br><img src="https://pic.dataeast.cn/picture/20240927180448.png?ynotemdtimestamp=1728887240937" data-processed="https%3A%2F%2Fpic.dataeast.cn%2Fpicture%2F20240927180448.png"><br>当出现打开目录，而且目录为服务端则为连接成功<br><img src="https://pic.dataeast.cn/picture/20240927180634.png?ynotemdtimestamp=1728887240937" data-processed="https%3A%2F%2Fpic.dataeast.cn%2Fpicture%2F20240927180634.png"></p>
<h2 id="配置服务端-nodejs-环境" data-source-line="51">配置服务端 nodejs 环境</h2>
<p data-source-line="52">打开Linux 终端命令行，输入node命令测试，如果已经安装了则下一步，如果没安装则从这里开始进行<br><img src="https://pic.dataeast.cn/picture/20240929104641.png?ynotemdtimestamp=1728887240937" data-processed="https%3A%2F%2Fpic.dataeast.cn%3A443%2Fpicture%2F20240929104641.png"><br>使用APT进行安装，这里的命令是Ubuntu的命令 <code>apt install nodejs</code>，如果centos则 <code>yum install nodejs</code><br><img src="https://pic.dataeast.cn/picture/20240929104801.png?ynotemdtimestamp=1728887240937" data-processed="https%3A%2F%2Fpic.dataeast.cn%3A443%2Fpicture%2F20240929104801.png"><br>在Ubuntu终端输入：<code>node -v</code> 查看版本号<br><img src="https://pic.dataeast.cn/picture/20240929105248.png?ynotemdtimestamp=1728887240937" data-processed="https%3A%2F%2Fpic.dataeast.cn%3A443%2Fpicture%2F20240929105248.png"><br>安装完成node 并且查到版本号显示正常之后，发现版本为18.19.1 或者其他，由于node的项目对版本有要求，不同版本会导致各种bug，因此需要固定开发版本，如何在一台机器上面运行多个版本的node，这里我们要按照 nvm 进行切换到lts版本的node</p>
<h2 id="安装-nvm-工具切换node版本" data-source-line="59">安装 nvm 工具切换node版本</h2>
<p data-source-line="60">下载nvm安装<br><code>curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.5/install.sh | bash</code><br>如果遇到网络出现问题，则需要使用代理进行下载，如：<br><code>proxychains curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.5/install.sh | bash</code><br>实在没有代理，则可以采用小曲的存储桶下载地址：<br><code>curl -o- https://pic.dataeast.cn/picture/install_nvm_0.35.9.sh | bash</code><br>现在完成之后会出现这样的显示<br><img src="https://pic.dataeast.cn/picture/20240929112638.png?ynotemdtimestamp=1728887240937" data-processed="https%3A%2F%2Fpic.dataeast.cn%3A443%2Fpicture%2F20240929112638.png"><br>然后在终端中运行以下命令以加载 nvm：</p>
<pre><code data-source-line="69">export NVM_DIR="$HOME/.nvm"
[ -s "$NVM_DIR/nvm.sh" ] && \. "$NVM_DIR/nvm.sh"# This loads nvm
</code></pre>
<p data-source-line="73">执行完成之后即可使用nvm<br><img src="https://pic.dataeast.cn/picture/20240929112815.png?ynotemdtimestamp=1728887240937" data-processed="https%3A%2F%2Fpic.dataeast.cn%3A443%2Fpicture%2F20240929112815.png"><br>安装node 长期支持的版本 v20.17.0 <code>nvm install 20.17.0</code> , 完成安装之后可以看到切换之后的node版本，未来我们将使用这个版本进行nextjs的开发<br><img src="https://pic.dataeast.cn/picture/20240929113405.png?ynotemdtimestamp=1728887240937" data-processed="https%3A%2F%2Fpic.dataeast.cn%3A443%2Fpicture%2F20240929113405.png"></p>
<h4 id="更详细内容查看" data-source-line="80">文档不完整？及时更新内容查看下方地址</h4>
<blockquote data-source-line="81">
<p>独立博客 https://www.dataeast.cn/<br>CSDN博客 https://blog.csdn.net/siberiaWarpDrive<br>B站视频空间 https://space.bilibili.com/25871614?spm_id_from=333.1007.0.0<br>关注 “曲速引擎 Warp Drive” 微信公众号<br><img src="https://pic.dataeast.cn/picture/20241016170749.png?ynotemdtimestamp=1728887240937" data-processed="https%3A%2F%2Fpic.dataeast.cn%3A443%2Fpicture%2F20241016170749.png"></p>
</blockquote><br><br>
来源：https://www.cnblogs.com/XiaoH160309/p/18470350
頁:
[1]