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

相关推荐
johnny23321 小时前
运维管理面板:AcePanel、OpenOcta、DeepSentry
运维
青梅橘子皮21 小时前
Linux---基本指令
linux·运维·服务器
REDcker1 天前
Linux信号机制详解 POSIX语义与内核要点 sigaction与备用栈实践
linux·运维·php
cui_ruicheng1 天前
Linux进程间通信(三):System V IPC与共享内存
linux·运维·服务器
运维全栈笔记1 天前
Linux安装配置Tomcat保姆级教程:从部署到性能调优
linux·服务器·中间件·tomcat·apache·web
dllmayday1 天前
Linux 上用终端连接 WiFi
linux·服务器·windows
ACP广源盛139246256731 天前
IX8024与科学大模型的碰撞@ACP#筑牢科研 AI 算力高速枢纽分享
运维·服务器·网络·数据库·人工智能·嵌入式硬件·电脑
峥无1 天前
Linux系统编程基石:静态库·动态库·ELF文件·进程地址空间全景图
linux·运维·服务器
码云数智-大飞1 天前
本地部署大模型:隐私安全与多元优势一站式解读
运维·网络·人工智能
Harvy_没救了1 天前
【网络部署】 Win11 + VMware CentOS8 + Nginx 文件共享服务 Wiki
运维·网络·nginx