前端項目部署到云服務(wù)器

Jason 發(fā)布于2019-07-25 14:47 / 1965人閱讀

摘要：前端項目準備我們需要在里面添加一行如果不加上這個的話之后打包的時候打開會報錯項目完成以后，運行進行打包例如打包之后的文件夾為云服務(wù)器設(shè)置首先進入服務(wù)器，然后安裝推薦源安裝安裝服務(wù)器首先打開命令行，連上你的服務(wù)器命令安裝服務(wù)器配置安裝完成后

前端項目準備

我們需要在 package.json 里面添加一行
"homepage": ".",
如果不加上這個的話
之后打包的時候,打開index.html會報錯
項目完成以后，運行 npm run build 進行打包
例如打包之后的文件夾為 build

云服務(wù)器設(shè)置

首先進入服務(wù)器，然后安裝 nginx
推薦 yum 源安裝

安裝 nginx 服務(wù)器

ssh root@yourIp    // 首先打開命令行，連上你的服務(wù)器

yum install -y nginx    // 命令安裝 nginx 服務(wù)器

配置nginx

安裝完成后，進入 nginx 配置文件目錄一般是 /etc/nginx/ 下
在該目錄下新建一個 vhost 文件夾作為你自己的配置文件目錄
然后進入 vhost 新建一個配置文件，比如 example.conf
輸入如下配置

server {
   listen      5000;    // 端口號可以自己設(shè)置
   server_name  localhost;
   root /usr/local/reactProjects/yourReactProject;    // 注意這是里放你上面 build 文件夾里的內(nèi)容
   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 路徑只是舉個例子，你可以放在其他目錄下
另外，上傳文件到云服務(wù)器可以用 xftp 或者其他的軟件
再輸入 vi nginx.conf 添加下圖劃紅線部分代碼，把你的配置 include 進來

到此簡易版的 nginx 就配置好了
這里暫不考慮反向代理等復(fù)雜配置

啟動

輸入 systemctl start nginx 開啟 nginx 服務(wù)

瀏覽器上輸入 yourIpAdress:5000/ 便可以訪問你的頁面了

另外 systemctl status nginx 可以查看 nginx 的運行狀態(tài)

以及 systemctl stop nginx 可以關(guān)閉 nginx 服務(wù)

GPU云服務(wù)器云服務(wù)器項目部署到云主機上怎么把項目部署到云vps 怎么把項目部署到云主機前端web項目部署到云服務(wù)器

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/40460.html

相關(guān)文章

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

摘要：前端項目使用搭建項目，這里就不發(fā)了安裝和配置或加載。目錄下文件修改來個請求，查看結(jié)果。一。前端項目 1.使用vue-cli（vue2.0）搭建項目，這里就不發(fā)了. 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

摘要：這個方法我沒有嘗試過，不過應(yīng)該是可行的這樣的優(yōu)點是很簡便，適合小型的網(wǎng)站項目將打包的項目和服務(wù)端分別部署客戶端根目錄主頁避免模式刷新管理控制后臺服務(wù)端跨域這樣部署雖然稍微麻煩一點，但可以適應(yīng)很多場景，而且開發(fā)分工更方便，結(jié)構(gòu)也一目了然我個人想了2種部署方案 1、將vue項目打包后放入node服務(wù)端的靜態(tài)資源中訪問整體結(jié)構(gòu)基本是這樣的 showImg(https://segmentf...

Honwhy 2019-07-25 14:24 評論0 收藏0
遷移到云計算？從準備評估開始

摘要：不僅讓部門單獨負責(zé)整個遷移工程是錯誤的方法，這同時也釋放出了關(guān)于云遷移項目的規(guī)模和重要性的錯誤消息。通常情況下，這種全面而徹底的評估服務(wù)可以由企業(yè)用戶的主機托管服務(wù)供應(yīng)商提供;或者更好的情況是從企業(yè)用戶即將被遷移到云中的解決方案的軟件供應(yīng)商來提供。這項云準備就緒評估是企業(yè)用戶長期發(fā)展規(guī)劃藍圖的一部分。其需要審核企業(yè)的整個環(huán)境，這樣您就可以計劃和執(zhí)行高效且有效的遷移。您企業(yè)為什么需要考慮這樣...

nifhlheimr 2019-04-25 17:42 評論0 收藏0
Spring Boot 參考指南（部署到云）

摘要：第章部署應(yīng)用程序的靈活打包選項在部署應(yīng)用程序時提供了大量的選擇，你可以將應(yīng)用程序部署到各種云平臺容器映像例如或虛擬真實機器上。本節(jié)介紹一些更常見的部署場景。第VI章. 部署 Spring Boot 應(yīng)用程序 Spring Boot的靈活打包選項在部署應(yīng)用程序時提供了大量的選擇，你可以將Spring Boot應(yīng)用程序部署到各種云平臺、容器映像(例如Docker)或虛擬/真實機器上。本...

learning 2019-08-16 12:28 評論0 收藏0
為什么將信息管理系統(tǒng)遷移到云平臺和SaaS？

摘要：根據(jù)公司最近的信息管理狀況研究報告，超過的信息管理專業(yè)人員計劃轉(zhuǎn)向基于云計算的解決方案。信息管理行業(yè)在過去三年中對云計算的態(tài)度發(fā)生了顯著變化。在將所有數(shù)據(jù)傳輸?shù)皆朴嬎阒白鳛榕R時舉措。此外，絕大多數(shù)組織的信息通常駐留在內(nèi)容管理系統(tǒng)之外。如今，信息管理市場正在發(fā)生根本性的變化。而將企業(yè)內(nèi)容管理（ECM）交易轉(zhuǎn)到云計算的進程則要慢得多，例如客戶關(guān)系管理（CRM）套件。事實上在幾年前，行業(yè)分析師估...

XGBCCC 2019-04-30 11:39 評論0 收藏0
multipages-generator今日發(fā)布?！媽媽再也不用擔(dān)心移動端h5網(wǎng)站搭建了！

摘要：本文適合的讀者現(xiàn)在在手淘，京東，今日頭條，美柚等過億用戶的手機中的，都常見網(wǎng)頁，他們有更新快，靈活，便于分享和傳播的特性。這里有他們中的幾個的例子手淘，美柚。本文適合的讀者??????? 現(xiàn)在在手淘，京東，今日頭條，美柚等過億用戶的手機app中的，都常見h5網(wǎng)頁，他們有更新快，靈活，便于分享和傳播的特性。這里有他們中的幾個h5的例子：（手淘，美柚）。這些app中都嵌者數(shù)以百計，千計的...

Kerr1Gan 2019-08-30 14:19 評論0 收藏0