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项目部署策略、加速业务创新步伐的黄金机遇。

相关推荐
Caster_Z43 分钟前
WinServer安装VM虚拟机运行Linux-(失败,云服务器不支持虚拟化)
linux·运维·服务器
小小测试开发1 小时前
提升WebUI自动化效率与性能:从脚本到架构的全链路优化指南
运维·架构·自动化
中屹指纹浏览器2 小时前
指纹浏览器抗检测进阶:绕过深度风控的技术实践
服务器·网络·经验分享·笔记·媒体
The star"'2 小时前
mysql(1-3)
运维·mysql·云计算
model20053 小时前
Alibaba linux 3安装LAMP(5)
linux·运维·服务器
weixin_307779133 小时前
Jenkins中的Jakarta Activation API插件:功能、使用与最佳实践
运维·开发语言·ci/cd·自动化·jenkins
Macbethad5 小时前
工业触摸屏技术指南:选型、难点与实战解决方案
服务器·前端·数据库
王 富贵6 小时前
【Linux】防火墙常用命令(iptables/firewalld/ufw)
linux·运维·服务器
一条咸鱼¥¥¥6 小时前
【运维经济】思科交换机和路由器的密码重置方法
运维·网络·智能路由器
写代码的【黑咖啡】6 小时前
Linux系统简介及常用命令分类详解
linux·运维·服务器