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

相关推荐
碳基沙盒40 分钟前
OpenClaw 多 Agent 配置实战指南
运维
Sinclair2 天前
简单几步,安卓手机秒变服务器,安装 CMS 程序
android·服务器
Rockbean3 天前
用40行代码搭建自己的无服务器OCR
服务器·python·deepseek
蝎子莱莱爱打怪3 天前
Centos7中一键安装K8s集群以及Rancher安装记录
运维·后端·kubernetes
茶杯梦轩3 天前
CompletableFuture 在 项目实战 中 创建异步任务 的核心优势及使用场景
服务器·后端·面试
海天鹰4 天前
【免费】PHP主机=域名+解析+主机
服务器
DianSan_ERP4 天前
电商API接口全链路监控:构建坚不可摧的线上运维防线
大数据·运维·网络·人工智能·git·servlet
呉師傅4 天前
火狐浏览器报错配置文件缺失如何解决#操作技巧#
运维·网络·windows·电脑
不是二师兄的八戒4 天前
Linux服务器挂载OSS存储的完整实践指南
linux·运维·服务器
芝士雪豹只抽瑞克五4 天前
Nginx 高性能Web服务器笔记
服务器·nginx