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

相关推荐
无足鸟ICT2 分钟前
【RHCA+】_etc_yum.repos.d_文件名.repo
linux·运维·centos
tianyuanwo5 分钟前
RPM Spec中Name: %{?scl_prefix}xxx中增加宏定义的设计原理
linux·服务器·rpm·scl
cc_瀚海知行16 分钟前
工具调用 6|助手什么时候该停下来?
java·服务器·前端·人工智能·python·ai
红姐跨境书1 小时前
Facebook账号频繁被要求验证怎么办?从登录异常到浏览器环境排查
运维·服务器
月落汀兰1 小时前
服务器出问题没人告警?Zabbix6.0 LNMP 部署,MySQL 监控 + 邮件告警保姆级实战
运维·服务器·zabbix
运维踩坑日记1 小时前
【无标题】
linux·运维·windows
xiaoyunxuexibiji1 小时前
供应商绩效评价体系如何建立?从评价指标到自动化考核
运维·人工智能·自动化
骇客野人2 小时前
CI/CD A 服务器(构建机)免密登录 B 服务器(目标部署机)完整操作
服务器·servlet·ci/cd
Z21-X2 小时前
云原生运维学习笔记:从云计算概念到服务器硬件的入门之旅
运维·笔记·学习·云原生
虚无的纽扣2 小时前
【Linux】线程(下):怎么创建、终止与分离一个线程
linux·运维·服务器