828华为云征文 | 将Vue项目部署到Flexus云服务器X实例并实现公网访问

一、Flexus云服务器X实例简介

1.1 概述

华为云Flexus X实例是华为云推出的一款创新云服务器产品，它主要面向中小企业和开发者，旨在解决传统云服务中的痛点，提供更加灵活、高效的云服务体验。

华为深刻洞察了中小企业和开发者在云服务应用中遇到的挑战，如资源规格刚性与用户多样化需求之间的矛盾、业务调优复杂性等，将柔性算力技术引入到服务器中，产生了Flexus X实例，实现了对传统云服务的革命性变革，为用户提供了更加贴合实际业务需求的云服务解决方案。

1.2 产品特点

柔性算力技术：Flexus X实例业界首创CPU内存规格柔性定义，最高可实现3:1的CPU/内存比，同时提供超过100种规格组合，满足用户对算力规格的个性化需求。这一技术突破了传统云服务固定规格的限制，实现了云资源与实际业务场景的精准匹配，有效降低了资源浪费和成本。
智能调度与稳定性保障：Flexus X实例引入了瑶光云脑技术和大模型智能调度能力，能够智能感知云主机实际利用率并进行智能调度，确保算力分配的稳定性和性能的持久性。同时，Flexus X实例还提供了与华为云旗舰级云服务器产品相媲美的高可用性，包括单AZ 99.975%的可用性和跨AZ 99.995%的可用性。
应用调优与便捷性：Flexus X实例内置了智能应用调优算法，能够自动匹配合适的应用参数和内核参数，降低业务调优的难度。此外，Flexus X实例还支持热变配能力，用户可以直接升配CPU和内存规格而不需要重启实例，这对于企业级应用、电商、游戏等业务场景非常有价值。
系统镜像与迁移支持：Flexus X实例提供了多种系统镜像选择，包括CenOS、Ubuntu Server、EulerOS等，用户可以根据需求选择合适的系统镜像。同时，华为云还提供了迁移中心MgC，帮助企业高效地计算迁移成本和实现快速的业务迁移，从而降低企业的上云门槛和成本。

1.3 价格与优惠

华为云Flexus X实例以其经济型的价格和近乎旗舰级的性能，为用户提供了跃级体验。具体价格可能因配置和促销活动而有所不同，最近华为云828 B2B企业节正在举办，Flexus X实例的促销也非常给力，大家可以去看看。下图就是华为云Flexus X实例在官网给出的价格相较于其他云服务也是十分优惠了，大家有需要的可以抓紧时间入手了。

接下来我们通过将本地的Vue项目部署到咱们的华为云Flexus X实例服务器上，讲解如何使用华为云Flexus X实例将本地的Vue项目部署上去。这里我们需要用到Nginx，因此得先安装Nginx

二、部署过程

2.1 安装Nginx

接下来我们打开华为云Flexus X实例的控制台：，点击远程登录：

这里还是照旧啊，我们使用华为的CloudShell登录，不得不说，比去年的服务器终端界面友好太多了，输入服务器密码之后，登录成功如下图：

这里我们直接使用wget命令在服务器上直接下载Nginx

wget http://nginx.org/download/nginx-x.x.x.tar.gz（请将x.x.x替换为具体的版本号）。

这里我下载的版本是1.22.1，因此命令就是：

wget http://nginx.org/download/nginx-1.22.1.tar.gz

下载完成之后使用ls命令，可以看到安装包也确实在当前目录下拉。

然后编译安装Nginx

解压安装包：将下载的Nginx源代码包解压到/usr/local，命令如下：

tar -zxvf nginx-1.22.1.tar.gz -C /usr/local

配置Nginx：进入解压后的目录，执行./configure命令进行配置。可以根据需要添加编译选项，如--prefix=/usr/local/nginx指定安装目录，--with-http_ssl_module启用SSL支持等。这里我们先进入到cd /usr/local/nginx-1.22.1/目录，然后再进行配置，命令如下：

cd /usr/local/nginx-1.22.1/

./configure

这里显示pcre pcre-develm没有这个库，因此我们使用命令：

yum install pcre pcre-devel

安装pcre pcre-develm没有这个库

安装完成之后，再执行配置，好像还是有问题，原来是还缺少了zlib依赖，然后我们继续安装

yum install zlib zlib-devel

安装完成之后，我们再执行./configure命令就没有问题了，

编译并安装：执行make命令进行编译，然后执行make install命令进行安装。这两步稍微要等久一点，

到这里我们就已经完成安装了，然后启动nginx：

# 启用nginx服务
cd /usr/local/nginx/sbin/
./nginx -c /usr/local/nginx/conf/nginx.conf

然后在浏览器输入我们服务器的公网IP，就可以看得到Nginx的欢迎界面了：

2.2 打包项目

接下来我们打开Vue项目，执行npm run build命令打包项目，

打包成功后会在项目目录下生成一个dist目录，dist目录里面就包含了项目的静态文件及代码：

接下来我们点击index.html看看是否有页面，如果没有的话，就需要我们在vue.config.js文件上加上下面三个参数。

2.3 配置Nginx

然后我们先在咱服务器上的nginx目录下，新建一个test目录，存放我们刚刚打包的dist目录

然后将dist目录上传进去，这里发现cloudShell是不能多文件上传的，这里提个需求哈，这下我们还得依靠第三方上传。上传上去之后，修改nginx配置文件。

把这里修改成我们刚刚创建的test目录名，因为index.html文件在这里嘛。

然后使用命令关闭刚刚启动的nginx服务，然后再启动

# 启用nginx服务
cd /usr/local/nginx/sbin/
./nginx -c /usr/local/nginx/conf/nginx.conf

然后刷新

OK，这下就已经成功部署上去了。

三、Flexus云服务器X实例的优势所在

3.1 产品优势

提供丰富的公共镜像，可灵活自定义镜像版本。
智能感知业务动态升降配，负载范围更高。
支持灵活自定义vCPU、内存实例规格。
支持按需计费更精细和灵活的定价模式，可基于实际负载画像智能推荐规格。

3.2 资源规格配置丰富

Flexus X实例通过和其他服务组合，具备计算、镜像安装、网络、存储、安全等能力，您可根据业务需要灵活配置各资源。

服务	说明
镜像服务（IMS）	通过镜像服务提供的公有镜像、私有镜像、共享镜像，Flexus X实例可快速安装操作系统。
云硬盘（EVS）	Flexus X实例通过EVS实现数据存储服务，并通过EVS的快照功能实现数据的备份和恢复。
虚拟私有云（VPC）	Flexus X实例通过VPC建立专属的网络环境，设置子网、安全组等。
弹性公网IP（EIP）	Flexus X实例通过EIP实现外网链接。
云备份（CBR）	Flexus X实例通过CBR备份单个云硬盘数据或整机数据，并利用备份数据恢复数据。
云监控（CES）	Flexus X实例通过云监控监控主机资源，您可以查看Flexus云服务器X实例的资源运行情况。
主机安全（HSS）	通过HSS，您可以实时监测Flexus云服务器X实例中的风险，降低Flexus云服务器X实例被入侵的风险。