前端vue和node后端项目部署到云服务器(详解)

这篇具有很好参考价值的文章主要介绍了前端vue和node后端项目部署到云服务器(详解)。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

前言:我是一名大三在校生,选修的专业是软件工程,然后主要学前端方向,作为一个前端程员,自己也想有自己的网站,然后被大家浏览,我觉得这是对自己能力的肯定,也是自我提升的一种方法,所以我学习了nodejs,利用nodejs作为项目的后端,然后结合前端最流行的框架之一的vue实现项目,那么我们的项目如何部署到云服务器被大家访问浏览,这里我会向大家详解讲解过程。

一、首先我们要有属于自己的云服务器ECS,所以我们必须购买服务器ECS,我一开始选的是阿里云。里面有免费试用的,因为条件我一开始选的就是免费的,哈哈哈。当是免费的有很大的局限性,比如服务器的域名不能备案,因为免费的是按流量计算的,要备案需要包年包月,所以不能备案域名就用不了,买了域名也不给用,除非自己购买一个服务器。还有就是访问速度慢等等。

二、购买服务器话,自己根据需要去买或免费使用一个,购买步骤可以自己找一下教程,我只讲

项目部署。

三、我们购买云服务器ECS后,进入云服务器ECS控制台,如下图

vue打包后如何发布到云服务器,前端,vue.js,javascript
阿里云-计算,为了无法计算的价值 (aliyun.com)

 

 2.选择自己的云服务点进去

 ​​​​​vue打包后如何发布到云服务器,前端,vue.js,javascript

3.先重置实例密码

vue打包后如何发布到云服务器,前端,vue.js,javascript

vue打包后如何发布到云服务器,前端,vue.js,javascript 

记住自己的密码和登录名:root(固定的)

 4.选择安全组

vue打包后如何发布到云服务器,前端,vue.js,javascript

5.选择配置规则

vue打包后如何发布到云服务器,前端,vue.js,javascript 

 6.添加访问规则

vue打包后如何发布到云服务器,前端,vue.js,javascript

 7.这时候要注册登录宝塔,地址:宝塔面板 - 简单好用的Linux/Windows服务器运维管理面板 (bt.cn)

 7.1登录进去后,第一次进去他会提示你安装宝塔,如下图

 

7.2点击查看教程

 7.3进去教程后,滑到如下图,

我是按这种方法部署到。所以我只讲这一个方法。 

vue打包后如何发布到云服务器,前端,vue.js,javascript

7.4我们先去官网下载宝塔终端,然后进去填写服务启动IP地址(公IP),SSH账号:root,密码是重置实例时设置的密码,随便备注,保存并继续。

vue打包后如何发布到云服务器,前端,vue.js,javascript

 成功后出现:

vue打包后如何发布到云服务器,前端,vue.js,javascript

 7.5复制下面的代码,在宝塔终端中按下鼠标右键进行粘贴,粘贴后按键盘的回车键,根据提示,输入y字母后,再次按键盘上的回车键进行宝塔面板的安装,如图

curl -sSO http://download.bt.cn/install/install_panel.sh && bash install_panel.sh

vue打包后如何发布到云服务器,前端,vue.js,javascript

 vue打包后如何发布到云服务器,前端,vue.js,javascript

7.5我们最好必须将上面红色框中的内容复制保存起来,因为你会频繁用到。

 首先将外网面板地址复制到浏览器访问,然后用username:你刚复制里面的username,password:你刚复制里面的password,进去后必须该用户名和密码,他给的太难记了。

vue打包后如何发布到云服务器,前端,vue.js,javascript

 7.6安装软件

vue打包后如何发布到云服务器,前端,vue.js,javascript

 7.7vue打包后如何发布到云服务器,前端,vue.js,javascript

 点击phpMyAdmin后(注意首先安装了PM2)vue打包后如何发布到云服务器,前端,vue.js,javascript

 vue打包后如何发布到云服务器,前端,vue.js,javascript

 vue打包后如何发布到云服务器,前端,vue.js,javascript

 7.8添加数据库

vue打包后如何发布到云服务器,前端,vue.js,javascript

 7.9导入数据库xxx.sql文件

vue打包后如何发布到云服务器,前端,vue.js,javascript

 这个xxx.sql文件自己从自己的sql工具导出,不会去找教程哈。注意选择安装mysql要和自己的mysql版本一致,不然导不进去。

8.接下来要部署node后端:

vue打包后如何发布到云服务器,前端,vue.js,javascript

 在nodejs中的db文件中

vue打包后如何发布到云服务器,前端,vue.js,javascript

app.js中

vue打包后如何发布到云服务器,前端,vue.js,javascript 然后将node项目文件打包,不要加node_modules文件,进去宝塔再加。

vue打包后如何发布到云服务器,前端,vue.js,javascript

 vue打包后如何发布到云服务器,前端,vue.js,javascript

 vue打包后如何发布到云服务器,前端,vue.js,javascript

 

 vue打包后如何发布到云服务器,前端,vue.js,javascript

 ​​​​​​​上传完毕后,安装node_modules依赖。vue打包后如何发布到云服务器,前端,vue.js,javascript

 vue打包后如何发布到云服务器,前端,vue.js,javascript

 vue打包后如何发布到云服务器,前端,vue.js,javascript

 vue打包后如何发布到云服务器,前端,vue.js,javascript

 vue打包后如何发布到云服务器,前端,vue.js,javascript

 提交后,就可以访问我们node后端了,可以在postman中测试连接。

9.部署vue前端项目

首先找到我们的vue项目,打开vue.conf.js

vue打包后如何发布到云服务器,前端,vue.js,javascript

然后在axios中修改

vue打包后如何发布到云服务器,前端,vue.js,javascript 然后执行npm run build,打包后的dist文件上传到宝塔中,和node上传方法差不多,这个dist直接拖过来就行。

 然后在网站栏添加站点

vue打包后如何发布到云服务器,前端,vue.js,javascript

 vue打包后如何发布到云服务器,前端,vue.js,javascript

 然后就部署成功了。

第一次部署项目到云服务的时候,我是各种找资料,最终部署成功,对小白来说确实慢慢摸索,当看到自己的项目在云服务上运行时,一切都值得。最后希望对大家有帮助!文章来源地址https://www.toymoban.com/news/detail-779727.html

到了这里,关于前端vue和node后端项目部署到云服务器(详解)的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • windows怎么部署项目到云服务器

    要将项目部署到云服务器,可以按照以下步骤进行操作: 1. 在云服务提供商上创建一个云服务器实例,并确保已经将其配置和启动。 2. 在本地开发环境中将项目打包成可执行文件或者jar包,并确保项目能够正确运行。 3. 使用远程连接工具(如SSH、RDP等)登录到云服务器。 4. 在

    2024年02月14日
    浏览(40)
  • 云服务器部署vue/node项目

    此处以阿里云服务器为例,配置的是LNMP环境 以阿里云服务为例,端口自定义99 1、在 /usr/share/nginx/html/ 该目录下新建文件夹,该文件夹是部署的打好包的前端项目 例: 2、进入nginx目录配置相关配置文件:/etc/nginx/conf.d/,在新建lemons.conf文件 touch /etc/nginx/conf.d/lemons.conf  //快速

    2024年02月04日
    浏览(38)
  • 如何在linux服务器上用Nginx部署Vue项目,以及如何部署springboot后端项目

    提示:文章写完后,目录可以自动生成,如何生成可参考右边的帮助文档 提示:这里可以添加本文要记录的大概内容: 本文内容记录如何在Linux(Ubuntu)系统上安装Nginx,并部署打包好的Vue前端项目,最后通过浏览器访问。 提示:以下是本篇文章正文内容,下面案例可供参考

    2024年04月16日
    浏览(33)
  • 部署 ssm 项目到云服务器上(购买云服务器 + 操作远程云服务器 + 服务器中的环境搭建 + 部署项目到服务器)

    推荐的做法:买一个云服务器。(主要是要有一个外网 IP) 好处:① 方便 (如果自己搭建,就比较麻烦)、② 便宜 (如果只是为了学习使用,最低配置的服务器完全够用,不到 50 元就能买一年使用权)、③ 有外网 IP ,可以部署项目(有了外网 IP,我们部署的项目,别人

    2024年02月11日
    浏览(49)
  • PHP项目部署到云服务器(CentOS+HTTP+PHP+MYSQL)

    如何将写好的项目部署到云服务器,让外界可以通过互联网访问项目网站。以下使用的是腾讯云服务器操作,系统环境为CentOS7.9。 打开腾讯云官网,注册好自己的平台账号。如果是新人的话去新人专区购买服务器,性价比高。 这里可以选的服务器有轻量云服务器、云服务器

    2024年02月05日
    浏览(37)
  • 手动将Java SpringBoot项目部署到云服务器上(使用docker)

    本文记录一下我作为一个小白如何通过docker手动将java springboot项目部署到云服务器上(以腾讯云的轻量应用服务器为例)。 但是我个人还是推荐安装一个宝塔面板部署 ,真的全程自动化,非常方便,网上有很多相关的教程可以搜搜看。所以我写这个教程其实只想记录一下我

    2024年04月25日
    浏览(30)
  • idea集成Docker + Docker部署SpringBoot项目到云服务器 保姆级教程

    本人使用资源: 云服务器主机:腾讯云宝塔linux 操作系统:OpenCloudOS 8.6 本文分别讲解了: 1、idea如何集成并使用docker 2、springboot项目如何引入Docker管理 3、如何将一个springboot项目使用Docker打包为一个镜像 不仅讲解了方法,还列出了在整个过程中会遇到的一些问题和注意事项

    2024年02月06日
    浏览(37)
  • 【前端部署】vue项目打包并部署到Linux服务器

    在vs code中打开vue前端项目文件夹,在终端中输入 npm run build ,打包完成后,在前端项目文件夹中会生成一个名为 dist 的文件夹,如下图所示: dist文件夹打开如下所示: 打开服务器终端,在终端中输入以下命令,下载nginx安装包。 其中nginx版本可以自己选择,具体版本可查看

    2024年02月06日
    浏览(42)
  • 将前端vue项目部署到服务器上(详细教程&各种bug解决办法)

    1、修改文件中的配置(解决打包后点击index.html空白页的情况) 将vue.config.js下的publicPath从 \\\'/\\\' 改成 \\\'./\\\' 2、将写好的项目打包 正常的命令是npm run build, 如果是使用vue-admin-template则使用npm run build:prod 3、使用Xftp将打包后的dist传到服务器上,最好传到root目录下 4、 在服务器上安

    2024年02月13日
    浏览(32)
  • 关于前端vue打包项目以及静态网站部署项目到阿里云ECS云服务器初学简单教程

    准备工作: 1.首先进入https://ecs.console.aliyun.com/ 领取或者购买一台简单的ECS云服务器。 进入网站注册登录后拉到页面最下面或者顶部搜索免费云服务器领取立即试用 ,当然富哥花钱买一台服务器也行。   创建完了以后可以进入云服务ECS工作台,然后就是以下界面   点击右边

    2024年02月04日
    浏览(43)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包