[AWS] Deploy react project on EC2

時間 2019-11-07

標籤 aws deploy react project ec2 欄目 React 简体版

原文原文鏈接

AWS的項目服務

如何在aws部署項目

申請到亞馬遜AWS免費帳戶後，咱們能夠擁有不少的免費雲服務產品項目，其中包括：html

- EC2雲服務器、
- Amazon S3存儲、
- Amazon RDS數據庫、
- Amazon CloudFront分發服務、
- Mobile Analytics移動分析服務、
- Amazon SNS消息推送服務等等項目。

Ref: 亞馬遜AWS免費EC2虛擬機開通實例和部署密鑰、安全策略過程【很詳細】node

開放端口比較有講究，以下：react

更多詳細內容能夠參見：[AWS] EC2 & GPUwebpack

如何關掉EC2上的鏡像

Terminate Instancegit

When you terminate an EC2 instance, the instance will be shutdown and the virtual machine that was provisioned for you will be permanently taken away and you will no longer be charged for instance usage. Any data that was stored locally on the instance will be lost. Any attached EBS volumes will be detached and deleted. However, if you attach an EBS Snapshot to an instance at boot time, the default option in the Dashboard is to delete the attached EBS volume upon termination.github

Stop Instance

When you stop an EC2 instance, the instance will be shutdown and the virtual machine that was provisioned for you will be permanently taken away and you will no longer be charged for instance usage.web

The key difference between stopping and terminating an instance is that the attached bootable EBS volume will not be deleted.　　<----mongodb

The data on your EBS volume will remain after stopping while all information on the local (ephemeral) hard drive will be lost as usual. The volume will continue to persist in its availability zone. Standard charges for EBS volumes will apply. Therefore, you should only stop an instance if you plan to start it again within a reasonable timeframe. Otherwise, you might want to terminate an instance instead of stopping it for cost saving purposes.數據庫

The ability to stop an instance is only supported on instances that were launched using an EBS-based AMI where the root device data is stored on an attached EBS volume as an EBS boot partition instead of being stored on the local instance itself. As a result, one of the key advantages of starting a stopped instance is that it should theoretically have a faster boot time. When you start a stopped instance the EBS volume is simply attached to the newly provisioned instance. Although, the AWS-id of the new virtual machine will be the same, it will have new IP Addresses, DNS Names, etc. You shouldn't think of starting a stopped instance as simply restarting the same virtual machine that you just stopped as it will most likely be a completely different virtual machine that will be provisioned to you.express

For more information about what really happens during each server/instance state, please see Server States.

Warning! - When stopping an instance, keep in mind that it must be started again through RightScale in order to operate correctly. If the instance is started outside of RightScale, we will not be able to generate the required user data so that the instance will be able to properly communicate with RightScale via the RightLink agent.

步步實踐

AWS EC2 Tutorial For Beginners | AWS Certified Solutions Architect Tutorial | AWS Training | Edureka【2+ hours】

[AWS] How to deploy Node.js apps on AWS EC2【step by step】

遠程登陸配置

簡單地說就是配置完畢後，經過ssh登陸遠程服務器。

chmod 400 lotusairline-test.pem
ssh -i "lotusairline-test.pem" ubuntu@ec2-54-252-131-130.ap-southeast-2.compute.amazonaws.com

代碼運行環境配置

  git clone https://github.com/hoanghuynh1995/AirlineReservation.git

  cd AirlineReservation/

  sudo apt-get update
  sudo apt-get install npm

  npm install

  # install node.
  node server.js

  sudo apt-get install nodejs-legacy
  node server.js

  # change port.
  vim server.js 

  # start. 
  sudo node server.js

一開始鏈接不上，以下：

ubuntu@ip-172-31-4-91:~/demo/AirlineReservation$ node server.js

Mongoose: mpromise (mongoose's default promise library) is deprecated, plug in your own promise library instead: http://mongoosejs.com/docs/promises.html
`open()` is deprecated in mongoose >= 4.11.0, use `openUri()` instead, or set the `useMongoClient` option if using `connect()` or `createConnection()`. See http://mongoosejs.com/docs/4.x/docs/connections.html#use-mongo-client
Server running at http://localhost:3000
Db.prototype.authenticate method will no longer be available in the next major release 3.x as MongoDB 3.6 will only allow auth against users in the admin db and will no longer allow multiple credentials on a socket. Please authenticate using MongoClient.connect with auth credentials.
Mongoose: airports.ensureIndex({ code: 1 }, { unique: true, background: true })
Mongoose: bookings.findOne({}, { sort: { bookedAt: -1 }, limit: 1, fields: {} })
Mongoose: bookings.ensureIndex({ code: 1 }, { unique: true, background: true })
Mongoose: routes.ensureIndex({ code: 1 }, { unique: true, background: true })

全局安裝yarn

npm install -g yarn

node版本太低！

ubuntu@ip-172-31-4-91:~/hahaha/proj$ sudo yarn yarn install v1.7.0
warning You are using Node "4.2.6" which is not supported and may encounter bugs or unexpected behavior. Yarn supports the following semver range: "^4.8.0 || ^5.7.0 || ^6.2.2 || >=8.0.0"
warning package.json: No license field
warning tc_platform@0.0.1: No license field
[1/5] Validating package.json...
error tc_platform@0.0.1: The engine "node" is incompatible with this module. Expected version ">= 8.9.0".
error Found incompatible module
info Visit https://yarnpkg.com/en/docs/cli/install for documentation about this command.

ubuntu@ip-172-31-4-91:~/my_fiora_resume/tc_platform$ node -v
v4.2.6

故，選擇合適版本的源碼安裝node.js。

$ sudo git clone https://github.com/nodejs/node.git
Cloning into 'node'...

lolo@lolo-UX303UB$ node -v
v8.9.4　　//一個實踐所得匹配的版本
lolo@lolo-UX303UB$ yarn -v
1.7.0

$ sudo chmod -R 755 node

$ cd node
$ sudo ./configure
$ sudo make
$ sudo make install

$ node --version
v0.10.25

遠程鏈接並查看數據庫

安裝mongodb

sudo apt-get install mongodb

刪掉某數據庫

> use rc_platform
switched to db rc_platform

> db.dropDatabase()
{ "dropped" : "rc_platform", "ok" : 1 }

刪掉文檔

> db.users.remove({"username" : "jessehao123"})
WriteResult({ "nRemoved" : 1 })

備份數據庫

ubuntu@ip-172-31-4-91:~$  mongodump -h 127.0.0.1:27017 -d HotspotDB -o backup_HotspotDB

connected to: 127.0.0.1:27017
2018-06-22T12:18:28.413+0000 DATABASE: HotspotDB     to     backup_HotspotDB/HotspotDB
2018-06-22T12:18:28.413+0000     HotspotDB.system.indexes to backup_HotspotDB/HotspotDB/system.indexes.bson
2018-06-22T12:18:28.414+0000          12 documents
2018-06-22T12:18:28.414+0000     HotspotDB.messages to backup_HotspotDB/HotspotDB/messages.bson
2018-06-22T12:18:28.414+0000          104 documents
2018-06-22T12:18:28.414+0000     Metadata for HotspotDB.messages to backup_HotspotDB/HotspotDB/messages.metadata.json
2018-06-22T12:18:28.415+0000     HotspotDB.users to backup_HotspotDB/HotspotDB/users.bson
2018-06-22T12:18:28.415+0000          7 documents
2018-06-22T12:18:28.415+0000     Metadata for HotspotDB.users to backup_HotspotDB/HotspotDB/users.metadata.json
2018-06-22T12:18:28.415+0000     HotspotDB.groups to backup_HotspotDB/HotspotDB/groups.bson
2018-06-22T12:18:28.415+0000          7 documents
2018-06-22T12:18:28.415+0000     Metadata for HotspotDB.groups to backup_HotspotDB/HotspotDB/groups.metadata.json
2018-06-22T12:18:28.416+0000     HotspotDB.friends to backup_HotspotDB/HotspotDB/friends.bson
2018-06-22T12:18:28.416+0000          7 documents
2018-06-22T12:18:28.416+0000     Metadata for HotspotDB.friends to backup_HotspotDB/HotspotDB/friends.metadata.json
2018-06-22T12:18:28.416+0000     HotspotDB.sockets to backup_HotspotDB/HotspotDB/sockets.bson
2018-06-22T12:18:28.416+0000          1 documents
2018-06-22T12:18:28.416+0000     Metadata for HotspotDB.sockets to backup_HotspotDB/HotspotDB/sockets.metadata.json

View Code

Ref: MongoDB導入導出以及數據庫備份

還原數據庫

ubuntu@ip-172-31-4-91:~$ mongorestore -h 127.0.0.1:27017 -d HotspotDB --dir backup_HotspotDB/HotspotDB/

connected to: 127.0.0.1:27017
2018-06-22T12:30:34.301+0000 backup_HotspotDB/HotspotDB/sockets.bson
2018-06-22T12:30:34.301+0000     going into namespace [HotspotDB.sockets]
Restoring to HotspotDB.sockets without dropping. Restored data will be inserted without raising errors; check your server log
1 objects found
2018-06-22T12:30:34.304+0000     Creating index: { key: { _id: 1 }, name: "_id_", ns: "HotspotDB.sockets" }
2018-06-22T12:30:34.304+0000     Creating index: { unique: true, key: { id: 1 }, name: "id_1", ns: "HotspotDB.sockets", background: true }
2018-06-22T12:30:34.305+0000     Creating index: { key: { user: 1 }, name: "user_1", ns: "HotspotDB.sockets", background: true }
2018-06-22T12:30:34.305+0000 backup_HotspotDB/HotspotDB/groups.bson
2018-06-22T12:30:34.305+0000     going into namespace [HotspotDB.groups]
Restoring to HotspotDB.groups without dropping. Restored data will be inserted without raising errors; check your server log
7 objects found
2018-06-22T12:30:34.306+0000     Creating index: { key: { _id: 1 }, name: "_id_", ns: "HotspotDB.groups" }
2018-06-22T12:30:34.315+0000     Creating index: { unique: true, key: { name: 1 }, name: "name_1", ns: "HotspotDB.groups", background: true }
2018-06-22T12:30:34.315+0000 backup_HotspotDB/HotspotDB/friends.bson
2018-06-22T12:30:34.315+0000     going into namespace [HotspotDB.friends]
Restoring to HotspotDB.friends without dropping. Restored data will be inserted without raising errors; check your server log
7 objects found
2018-06-22T12:30:34.317+0000     Creating index: { key: { _id: 1 }, name: "_id_", ns: "HotspotDB.friends" }
2018-06-22T12:30:34.318+0000     Creating index: { key: { from: 1 }, name: "from_1", ns: "HotspotDB.friends", background: true }
2018-06-22T12:30:34.318+0000 backup_HotspotDB/HotspotDB/users.bson
2018-06-22T12:30:34.318+0000     going into namespace [HotspotDB.users]
Restoring to HotspotDB.users without dropping. Restored data will be inserted without raising errors; check your server log
7 objects found
2018-06-22T12:30:34.320+0000     Creating index: { key: { _id: 1 }, name: "_id_", ns: "HotspotDB.users" }
2018-06-22T12:30:34.320+0000     Creating index: { unique: true, key: { username: 1 }, name: "username_1", ns: "HotspotDB.users", background: true }
2018-06-22T12:30:34.320+0000 backup_HotspotDB/HotspotDB/messages.bson
2018-06-22T12:30:34.320+0000     going into namespace [HotspotDB.messages]
Restoring to HotspotDB.messages without dropping. Restored data will be inserted without raising errors; check your server log
104 objects found
2018-06-22T12:30:34.326+0000     Creating index: { key: { _id: 1 }, name: "_id_", ns: "HotspotDB.messages" }
2018-06-22T12:30:34.326+0000     Creating index: { key: { createTime: 1 }, name: "createTime_1", ns: "HotspotDB.messages", background: true }
2018-06-22T12:30:34.327+0000     Creating index: { key: { to: 1 }, name: "to_1", ns: "HotspotDB.messages", background: true }

View Code

查看內容

> show collections
friends
users

> db.users.find().pretty()
{
    "_id" : ObjectId("5b1e34f98a51ee0f6fa3cf1f"),
    "expressions" : [ ],
       ...
}

GUI遠程鏈接

Ref: MongoDB Basic: How to Connect to MongoDB Remote Server

固然，有了GUI，以上的命令就扔一邊兒去了。

/* 有待學習 */

端口服務管理

端口查看

查看服務器運行程序的相關端口

lsof -i :8081  
列出8081誰在用，而後殺掉，騰出地方。

kill -9 <PID>

服務查看

查看某個進程或者服務是否存在。

ps -aux ｜ grep 「xxx」

持續運行

Ref: 如何實現SSH斷開後進程仍然在後臺運行

(cmd &)

AWS全家桶

常見策略

連接：https://www.zhihu.com/question/19568090/answer/263234569

不光使用過Amazon EC2，仍是用過Lambda，Kinesis，DynamoDB，IoT等等其餘服務，感受AWS不單單是IaaS，他的不少服務都已經超出了IaaS的界限，因此不太好定義它是IaaS仍是PaaS或是其餘，

簡單的說它是雲計算服務，個人規律是，個人業務架構裏哪些有痛點了或感受麻煩了，就看看AWS有哪些服務能夠解決。

先談一下EC2的感覺：EC2＋ELB＋Autoscaling簡直就是絕配，

ELB - 接收外部請求，
EC2 - 處理業務邏輯，
Autoscaling - 作自動伸縮。

總結起來，高可用，負載均衡，彈性，自動化這些高檔的詞無形中都已經實現了。

再談談Lambda，估計這就是從物理機器－>虛擬機－>容器－>函數發展的趨勢吧，Lambda確實是無服務器架構的典範，直接寫代碼，免運維，事件觸發這是對軟件開發模式的一次重大的變革。

DynamoDB一樣也是無服務器架構的一個重要組件，自定義吞吐、無需關心容量限制、NoSQL簡直是互聯網應用的最愛。

IoT解決了大規模鏈接設備的併發鏈接和海量數據的傳輸，他的頗有特點的設備影子真實解決了咱們再設備時常斷網狀況下的設備的控制難題。

客戶端佈置

create-react-app

是來自於Facebook出品的零配置命令行工具，可以幫你自動建立基於 Webpack+ES6 的最簡易的React項目模板，有助於初學者快速上手實踐。

安裝 create-react-app 的方式也很是簡單，能夠直接使用 npm 命令進行全局安裝。

npm install -g create-react-app
create-react-app my-app
cd my-app/
npm start

npm run build

運行後，到底發生了什麼?

Build complete.

Tip: built files are meant to be served over an HTTP server.
Opening index.html over file:// won't work.

構建文件務必放在一個服務器。
直接打開文件將不工做。HTTPindex.html

參考：npm run build 打包後，如何運行在本地查看效果

代碼會被編譯到build目錄。將整個應用打包發佈，自動試用webpack進行壓縮與優化。【webpack的一個做用】

大體意思是：

已經編譯好啦。build生成的這些東西要放在服務器root下，能夠在pakege.json裏，根據綠字裏的例子，再重寫。

也能讓它充當靜態的服務器，敲：npm install -g serve，在敲serve -s build，就能夠了。