vue+NodeJS项目部署打包上线到阿里云完整版(前台vue,后台node,数据库:mysql)

本文涉及的产品
RDS MySQL Serverless 基础系列,0.5-2RCU 50GB
云数据库 RDS MySQL,高可用系列 2核4GB
云数据库 RDS PostgreSQL,高可用系列 2核4GB
简介: vue+NodeJS项目部署打包上线到阿里云完整版(前台vue,后台node)

vue+NodeJS项目部署打包上线到阿里云完整版(前台vue,后台node)

阿里云服务器配置

  1. 购买云服务器,这里不做介绍。
  2. 改root密码: sudo passwd root
  3. 安装宝塔,执行一下命令
    Centos:yum install -y wget && wget -O install.sh http://download.bt.cn/install/install.sh && sh install.sh
    Ubuntu/Deepin:wget -O install.sh http://download.bt.cn/install/install-ubuntu.sh && sudo bash install.sh
    Debian:wget -O install.sh http://download.bt.cn/install/install-ubuntu.sh && bash install.sh
    Fedora:wget -O install.sh http://download.bt.cn/install/install.sh && bash install.sh
  4. 一路回车,有选择的就选‘y’
  5. 出现一下界面记得保存!记得保存!记得保存!,稍后登录会有需要。
  1. 登录宝塔,用你保存的url登录即可,进入宝塔界面。
  • 改完之后自己一定要记住。
  1. 根据自己的项目需要安装软件(以下是我的,仅供参考)。

  2. 开放相应的端口。

  3. 建立数据库并修改密码。

后台node项目准备

  1. 修改代码中的host和相应的数据库配置:

  2. 上传文件至服务器(我自己使用的是FileZilla)

  3. 上传完成之后打开pm2包管理器。

  4. 配置pm2包管理器

  5. 记住在“安全”中开放你项目中相应的端口。

前台项目打包上线

  1. 添加站点
  2. 在vue项目中执行npm run build 打包项目会生成dist一个文件夹。
  3. 上传dist文件中的东西到服务器,方法同上
  4. 将dist里面的东西放到此文件目录下面。
  5. 配置Nginx
{
    listen 80 default_server;
    server_name 47.95.1.82;
    index index.php index.html index.htm default.php default.htm default.html;
    root /www/wwwroot/http;
    #SSL-START SSL相关配置,请勿删除或修改下一行带注释的404规则
    #error_page 404/404.html;
    #SSL-END
    #ERROR-PAGE-START  错误页配置,可以注释、删除或修改
    #error_page 404 /404.html;
    #error_page 502 /502.html;
    #ERROR-PAGE-END
    #PHP-INFO-START  PHP引用配置,可以注释或修改
    include enable-php-00.conf;
    #PHP-INFO-END
    #REWRITE-START URL重写规则引用,修改后将导致面板设置的伪静态规则失效
    include /www/server/panel/vhost/rewrite/47.95.1.82.conf;
    #REWRITE-END
    #禁止访问的文件或目录
    location ~ ^/(\.user.ini|\.htaccess|\.git|\.svn|\.project|LICENSE|README.md)
    {
        return 404;
    }
    #一键申请SSL证书验证目录相关设置
    location ~ \.well-known{
        allow all;
    }
    location / {
    try_files $uri $uri/ @router;
    index index.html;
  }
    location @router {
        rewrite ^.*$ /index.html last;
    }
    location ~ .*\.(gif|jpg|jpeg|png|bmp|swf)$
    {
        expires      30d;
        error_log off;
        access_log /dev/null;
    }
    location ~ .*\.(js|css)?$
    {
        expires      12h;
        error_log off;
        access_log /dev/null; 
    }
    access_log  /www/wwwlogs/47.95.1.82.log;
    error_log  /www/wwwlogs/47.95.1.82.error.log;
}



相关实践学习
每个IT人都想学的“Web应用上云经典架构”实战
本实验从Web应用上云这个最基本的、最普遍的需求出发,帮助IT从业者们通过“阿里云Web应用上云解决方案”,了解一个企业级Web应用上云的常见架构,了解如何构建一个高可用、可扩展的企业级应用架构。
MySQL数据库入门学习
本课程通过最流行的开源数据库MySQL带你了解数据库的世界。   相关的阿里云产品:云数据库RDS MySQL 版 阿里云关系型数据库RDS(Relational Database Service)是一种稳定可靠、可弹性伸缩的在线数据库服务,提供容灾、备份、恢复、迁移等方面的全套解决方案,彻底解决数据库运维的烦恼。 了解产品详情: https://www.aliyun.com/product/rds/mysql 
相关文章
|
11月前
|
关系型数据库 MySQL Java
【IDEA】java后台操作mysql数据库驱动常见错误解决方案
【IDEA】java后台操作mysql数据库驱动常见错误解决方案
311 0
|
7月前
|
人工智能 JavaScript 关系型数据库
【02】Java+若依+vue.js技术栈实现钱包积分管理系统项目-商业级电玩城积分系统商业项目实战-ui设计图figmaUI设计准备-figma汉化插件-mysql数据库设计-优雅草卓伊凡商业项目实战
【02】Java+若依+vue.js技术栈实现钱包积分管理系统项目-商业级电玩城积分系统商业项目实战-ui设计图figmaUI设计准备-figma汉化插件-mysql数据库设计-优雅草卓伊凡商业项目实战
233 14
【02】Java+若依+vue.js技术栈实现钱包积分管理系统项目-商业级电玩城积分系统商业项目实战-ui设计图figmaUI设计准备-figma汉化插件-mysql数据库设计-优雅草卓伊凡商业项目实战
|
7月前
|
人工智能 JavaScript 安全
【01】Java+若依+vue.js技术栈实现钱包积分管理系统项目-商业级电玩城积分系统商业项目实战-需求改为思维导图-设计数据库-确定基础架构和设计-优雅草卓伊凡商业项目实战
【01】Java+若依+vue.js技术栈实现钱包积分管理系统项目-商业级电玩城积分系统商业项目实战-需求改为思维导图-设计数据库-确定基础架构和设计-优雅草卓伊凡商业项目实战
299 13
【01】Java+若依+vue.js技术栈实现钱包积分管理系统项目-商业级电玩城积分系统商业项目实战-需求改为思维导图-设计数据库-确定基础架构和设计-优雅草卓伊凡商业项目实战
|
8月前
|
缓存 NoSQL JavaScript
Vue.js应用结合Redis数据库:实践与优化
将Vue.js应用与Redis结合,可以实现高效的数据管理和快速响应的用户体验。通过合理的实践步骤和优化策略,可以充分发挥两者的优势,提高应用的性能和可靠性。希望本文能为您在实际开发中提供有价值的参考。
183 11
|
JSON 前端开发 Java
数据库中的时间和前台展示的时间不一样,如何保存日期格式的数据到数据库? 如何展示数据库的日期数据到前台
这篇文章讨论了前端展示时间和数据库时间不一致的问题,并提供了解决方法,包括在SpringBoot的`application.properties`中配置时区和日期格式,以及如何将日期数据格式化后保存到数据库中。
数据库中的时间和前台展示的时间不一样,如何保存日期格式的数据到数据库? 如何展示数据库的日期数据到前台
|
JavaScript NoSQL 中间件
《Node.js后端修炼手册》——揭秘服务器搭建与部署上线的生死时速,让你一战成名!
【8月更文挑战第27天】本文详细介绍如何从零开始利用Node.js构建后端服务器并部署至生产环境。首先,通过简易步骤搭建基础服务器,包括环境安装与配置。接着,引入Express框架优化路由与中间件管理,提升开发效率。随后,利用Mongoose实现MongoDB数据库连接,增强数据交互能力。为保证系统稳定性,文中还讲解了错误处理机制。最后,通过PM2等工具部署应用至生产环境,确保高效运行。本教程辅以示例代码,帮助读者快速掌握Node.js后端开发全流程。
497 2
|
存储 SQL 数据库
【计算机三级数据库技术】第8章 数据库后台编程技术--附思维导图
本文介绍了数据库后台编程的关键技术,包括存储过程、用户定义函数、触发器和游标,并附有思维导图。
146 1
|
运维 前端开发 Serverless
中后台前端开发问题之降低数据库使用门槛和运维成本如何解决
中后台前端开发问题之降低数据库使用门槛和运维成本如何解决
103 0
|
JavaScript Java 测试技术
基于springboot+vue.js+uniapp的《数据库原理及应用》课程平台附带文章源码部署视频讲解等
基于springboot+vue.js+uniapp的《数据库原理及应用》课程平台附带文章源码部署视频讲解等
130 0
|
存储 安全 关系型数据库
安全开发-PHP应用&留言板功能&超全局变量&数据库操作&第三方插件引用&后台模块&Session&Cookie&Token&身份验证&唯一性
安全开发-PHP应用&留言板功能&超全局变量&数据库操作&第三方插件引用&后台模块&Session&Cookie&Token&身份验证&唯一性
189 0