当前位置：首页 > article >正文

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

article 2024/9/20 12:10:10

概要

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

查看全文

http://www.kler.cn/news/310126.html