前端项目部署到云服务器

Jason 发布于2019-07-25 14:47 / 1903人阅读

摘要：前端项目准备我们需要在里面添加一行如果不加上这个的话之后打包的时候打开会报错项目完成以后，运行进行打包例如打包之后的文件夹为云服务器设置首先进入服务器，然后安装推荐源安装安装服务器首先打开命令行，连上你的服务器命令安装服务器配置安装完成后

前端项目准备

我们需要在 package.json 里面添加一行
"homepage": ".",
如果不加上这个的话
之后打包的时候,打开index.html会报错
项目完成以后，运行 npm run build 进行打包
例如打包之后的文件夹为 build

云服务器设置

首先进入服务器，然后安装 nginx
推荐 yum 源安装

安装 nginx 服务器

ssh root@yourIp    // 首先打开命令行，连上你的服务器

yum install -y nginx    // 命令安装 nginx 服务器

配置nginx

安装完成后，进入 nginx 配置文件目录一般是 /etc/nginx/ 下
在该目录下新建一个 vhost 文件夹作为你自己的配置文件目录
然后进入 vhost 新建一个配置文件，比如 example.conf
输入如下配置

server {
   listen      5000;    // 端口号可以自己设置
   server_name  localhost;
   root /usr/local/reactProjects/yourReactProject;    // 注意这是里放你上面 build 文件夹里的内容
   location / {
      try_files $uri @fallback;
   }
   location @fallback {
     rewrite .* /index.html break;
   }
   error_page   500 502 503 504  /50x.html;
   location = /50x.html {
     root   html;
   }
}

注意: /usr/local/reactProjects/yourReactProject 路径只是举个例子，你可以放在其他目录下
另外，上传文件到云服务器可以用 xftp 或者其他的软件
再输入 vi nginx.conf 添加下图划红线部分代码，把你的配置 include 进来

到此简易版的 nginx 就配置好了
这里暂不考虑反向代理等复杂配置

启动

输入 systemctl start nginx 开启 nginx 服务

浏览器上输入 yourIpAdress:5000/ 便可以访问你的页面了

另外 systemctl status nginx 可以查看 nginx 的运行状态

以及 systemctl stop nginx 可以关闭 nginx 服务

云服务器 GPU云服务器项目部署到云主机上怎么把项目部署到云vps 怎么把项目部署到云主机前端web项目部署到云服务器

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/40460.html

vue+koa2+mongo前后端分离restful，配置和部署到云

摘要：前端项目使用搭建项目，这里就不发了安装和配置或加载。目录下文件修改来个请求，查看结果。一。前端项目 1.使用vue-cli（vue2.0）搭建项目，这里就不发了. axios安装和配置～ npm install axios 1. main.js或app.js加载axios。 import axios from axios Vue.prototype.$axios =...

miracledan 2019-06-26 17:42 评论0 收藏0
vue vue-router(history模式) node(express)项目部署到云主机上的n

摘要：这个方法我没有尝试过，不过应该是可行的这样的优点是很简便，适合小型的网站项目将打包的项目和服务端分别部署客户端根目录主页避免模式刷新管理控制后台服务端跨域这样部署虽然稍微麻烦一点，但可以适应很多场景，而且开发分工更方便，结构也一目了然我个人想了2种部署方案 1、将vue项目打包后放入node服务端的静态资源中访问整体结构基本是这样的 showImg(https://segmentf...

Honwhy 2019-07-25 14:24 评论0 收藏0
迁移到云计算？从准备评估开始

摘要：不仅让部门单独负责整个迁移工程是错误的方法，这同时也释放出了关于云迁移项目的规模和重要性的错误消息。通常情况下，这种全面而彻底的评估服务可以由企业用户的主机托管服务供应商提供;或者更好的情况是从企业用户即将被迁移到云中的解决方案的软件供应商来提供。这项云准备就绪评估是企业用户长期发展规划蓝图的一部分。其需要审核企业的整个环境，这样您就可以计划和执行高效且有效的迁移。您企业为什么需要考虑这样...

nifhlheimr 2019-04-25 17:42 评论0 收藏0
Spring Boot 参考指南（部署到云）

摘要：第章部署应用程序的灵活打包选项在部署应用程序时提供了大量的选择，你可以将应用程序部署到各种云平台容器映像例如或虚拟真实机器上。本节介绍一些更常见的部署场景。第VI章. 部署 Spring Boot 应用程序 Spring Boot的灵活打包选项在部署应用程序时提供了大量的选择，你可以将Spring Boot应用程序部署到各种云平台、容器映像(例如Docker)或虚拟/真实机器上。本...

learning 2019-08-16 12:28 评论0 收藏0
为什么将信息管理系统迁移到云平台和SaaS？

摘要：根据公司最近的信息管理状况研究报告，超过的信息管理专业人员计划转向基于云计算的解决方案。信息管理行业在过去三年中对云计算的态度发生了显著变化。在将所有数据传输到云计算之前作为临时举措。此外，绝大多数组织的信息通常驻留在内容管理系统之外。如今，信息管理市场正在发生根本性的变化。而将企业内容管理（ECM）交易转到云计算的进程则要慢得多，例如客户关系管理（CRM）套件。事实上在几年前，行业分析师估...

XGBCCC 2019-04-30 11:39 评论0 收藏0
multipages-generator今日发布?！妈妈再也不用担心移动端h5网站搭建了！

摘要：本文适合的读者现在在手淘，京东，今日头条，美柚等过亿用户的手机中的，都常见网页，他们有更新快，灵活，便于分享和传播的特性。这里有他们中的几个的例子手淘，美柚。本文适合的读者?‍?‍?‍? 现在在手淘，京东，今日头条，美柚等过亿用户的手机app中的，都常见h5网页，他们有更新快，灵活，便于分享和传播的特性。这里有他们中的几个h5的例子：（手淘，美柚）。这些app中都嵌者数以百计，千计的...

Kerr1Gan 2019-08-30 14:19 评论0 收藏0