前端項目部署到云服務器

Jason 發布于2019-07-25 14:47 / 1956人閱讀

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

前端項目準備

我們需要在 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項目部署到云服務器

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/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