828华为云征文｜云服务器Flexus X实例｜MacOS系统-宝塔部署Nuxt项目

1. Flexus云服务器X实例

华为云的Flexus云服务是为中小企业和开发者设计的新一代云服务产品，它以高性价比和即开即用的特点，提供了卓越的用户体验。Flexus云服务器X实例是该服务系列中的一员，专为中低负载场景设计，如电商直播、企业网站搭建、开发测试环境、游戏服务器和音视频服务等。

1.1 与Flexus应用服务器L实例相比具备以下优势

• 丰富的公共镜像：提供多种操作系统和应用环境，满足不同开发和部署需求。
• 灵活的资源配置：用户可以根据实际需求，自定义虚拟CPU（vCPU）和内存的配比，实现资源的最优利用。
• 智能动态调整：能够根据业务负载智能调整资源分配，实现在不同负载情况下的自动升降配，提高资源利用率。
• 更广泛的负载适应性：相较于L实例，X实例能够适应更广泛的业务负载范围，提供更加稳定和高效的服务。

这里已经事先选购了一台服务器 Flexus X实例，在华为云828 B2B企业节期间，Flexus X实例正推出大力度促销活动，欢迎各位到官网了解。华为云828活动页面。千万不要错过这次机会。

接着，我们进入 Flexus X实例列表。

1.2 服务器的详细配置

查看我们配置的云服务

2.宝塔部署Nuxt项目

2.1 登录实例

我们通过CloudShell 来登录，十分方便快捷。

2.1 宝塔面板

之前我们事先在服务器Flexus X实例，搭建了宝塔面板。这里我们查看地址。

选择14 查看面板信息，初始密码首次登录的时候已经获取
这里我们登录一下。

进入宝塔面板，由于我们要部署前端项目，所以需要用的nginx服务器 ，这里我们安装下。

接着我们选择极速安装，操作起来还是简单快捷的。

等待安装任务进行

安装成功后我们可以在任务列表中查看安装状态。这里2个安装任务都安装成功了。

紧接着，我们再一次进入宝塔面板，进入“网站”菜单，这次可以正常添加站点了。

添加网站成功。

我们在浏览器打开，出现下面页面，表示我们部署成功了。接下来就是要替换成nuxt项目文件。

3. Nuxt 项目与部署

3.1 Nuxt

Nuxt.js 是一个基于 Vue.js 的更高层次的框架，它提供了一种更简单的方式来构建服务器端渲染（SSR）、静态生成的应用程序以及单页应用（SPA）。Nuxt.js 通过一系列约定和自动化工具简化了 Vue 应用的开发流程，使得开发者可以更加专注于业务逻辑而非配置。

3.2创建Nuxt项目

接着，我们查看到安装文档特别提到的先决条件：

那么按照文档安装条件，首先进行npx-v查看是否安装，nvxt的安装需要node版本比较高，一开始我v14.16.0 ，提示版本过低，于是我用nvm工具切换到高版本 v18.20.0.

安装成功后，我们运行起我们的项目。

运行成功后，我们可以看到默认欢迎页。

3.3 部署

nuxt提供了几种部署方式，这里我们采用下面一种，打包构建后可以部署到任何静态托管服务器上

跟着教程执行npx nuxi generate

执行成功后默认是在.output/public 目录，这里提一嘴，MacOS系统中，默认情况下，以点（.）开头的文件和文件夹是隐藏的。如果需要查看这些隐藏文件，我们可以使用以下方法：
在 shell 执行一下命令

defaults write com.apple.finder AppleShowAllFiles -bool true

然后重启 Finder 使更改生效：

killall Finder

接着我们在宝塔面板文件菜单上传我们上面打包好的文件。

这里选择上传的时候， 点开头的文件还是看不到，于是我改了下文件名。outputF ，然后选择public文件

接着点击继续上传

上传完成后，我们回到“网站”修改网站目录地址

3.4 部署成功

我们刷站点地址，就可以成功看到部署的内容。至此在云服务器Flexus X实例，基于宝塔部署Nuxt项目成功！！

4.结语

基于云服务器Flexus X实例，部署Nuxt项目的过程很顺利，选择华为云服务器，意味着您将获得一个稳定而高效的云计算环境。想要购买服务器的同学可以关注下这次华为云828活动，趁着活动优惠挑选自己心仪的服务器！