828华为云征文|云服务器Flexus X实例|Ubunt部署Vue项目

概要

本章将深入阐述Vue项目在Ubuntu环境下,实现在华为云Flexus X云服务器上的部署过程,此次演示以Vue.js项目为核心华为云在已经到来的828 B2B企业节上,为Vue等前端项目的部署与运维提供强有力的支持。

Ubuntu部署Vue项目的影响:

环境一致性:在Ubuntu系统上部署Vue项目,能够确保开发环境与生产环境的高度一致性,减少因环境差异导致的问题,提升项目稳定性和可维护性。

高效资源利用:Ubuntu以其轻量级和高效著称,结合Vue项目的轻量特性,能够最大化地利用云服务器的计算资源,降低运行成本,提升用户体验。

自动化与可扩展性:通过集成CI/CD流程(如使用Jenkins、GitLab CI等工具),Vue项目在Ubuntu上的部署可以实现高度自动化,同时,Ubuntu的灵活性和可扩展性也为Vue项目的后续扩展和升级提供了便利。

社区支持:Ubuntu拥有庞大的用户社区和丰富的文档资源,这为Vue项目的部署和运维过程中遇到的问题提供了强大的支持网络,帮助开发者快速解决问题,提升工作效率。

点击华为云官网连接:https://activity.huaweicloud.com/即可参与华为云828活动

​​

购买配置

​​

基本配置参考如下:

其他配置按需求选择即可

连接服务器

​​

远程登录界面:

​​

xshell登录界面:

根据个人ip进行登录即可

​​

构建项目

通过命令

复制代码
npm run build

构建项目将会得到一个dist的文件夹

更新本地软件包索引

安装Nginx

安装Nginx以提供高性能的Web服务和反向代理功能。

复制代码
sudoapt install nginx

检查Nginx是否运行

复制代码
sudo systemctl status nginx

设置nginx开机自启动

复制代码
sudo systemctl status nginx

检查nginx是否设置为开机自启动

复制代码
sudo systemctl is-enabled nginx

​ 项目迁移至服务器中

通过服务器的传输应用------>XFTP 7即可快捷移动

注意:右侧的存放地址应位于nginx文件夹下且应删去这里原本已存在的index,html文件

修改配置文件

通过vim修改配置文件nginx.conf

复制代码
sudo vim /etc/nginx/nginx.conf

为配置文件添加以下部分

复制代码
注:

        listen 8080;#####监听端口,根据个人需求

        server_name ###.#.###.###; ####个人服务器ip地址

        location / {  #####匹配请求的URI

                root /usr/share/nginx/html;--->请求的资源文件的根目录

                index index.html;
        #####当请求指向一个目录时,Nginx会尝试返回该目录下的index.html文件作为响应。

                try_files $uri $uri/ /index.html;
        #####Nginx会按顺序尝试返回请求的URI对应的文件、URI作为目录并尝试返回目录下的默认文件
        #####如果都失败,则返回/index.html文件
}

开放端口

网络安全组-->安全组规则配置

点击配置规则

添加规则

启动、重载并检查Nginx服务

启动Nginx服务

复制代码
sudo systemctl start nginx;

重新加载Nginx的配置文件,不中断当前连接

复制代码
sudo systemctl reload nginx;

查看Nginx服务的状态

复制代码
sudo systemctl status nginx;

通过网页ip+端口访问

小结

Ubuntu为Vue.js项目的部署铺设了坚实的基石。Vue.js以其轻量级的架构和作为现代前端框架的领先优势,华为更是通过其精心策划的828 B2B企业节等精彩活动,为用户带来了前所未有的优惠与便利。此刻,828 B2B企业节已盛大开启,借由华为云这一强大平台的助力,正是您优化Vue项目部署策略、加速业务创新步伐的黄金机遇。

相关推荐
凤年徐5 分钟前
Linux 基础指令与权限管理完全指南
linux·运维·chrome
gallonyin7 分钟前
服务器带宽异常排查实战:用 tcpdump + Docker 精准定位“吃带宽”的进程
服务器·docker·tcpdump
LJianK19 分钟前
《Java 数据分组的四种姿势:从 for 循环到 Stream API》
java·linux·服务器
信创DevOps先锋13 分钟前
中国DevOps市场格局重塑:本土化与全球化技术的博弈与融合
运维·devops
亚远景aspice13 分钟前
亚远景-ISO 21434:汽车网络安全全生命周期风险管理的技术框架
运维·网络·安全
EasyGBS18 分钟前
国标GB28181视频分析平台EasyGBS视频质量诊断技术让监控从“能用”变“好用”
运维·人工智能·音视频
白鸽梦游指南20 分钟前
docker部署和常规使用方法
运维·docker·容器
xdscode10 小时前
Linux云服务器安装openclaw,并对接飞书通道
linux·服务器·飞书·openclaw
lswzw10 小时前
win11家庭版 安装 openclaw
服务器
Percep_gan10 小时前
Linux中安装Redis,很详细
linux·运维·redis