Translation | "JavaScript Everywhere" Chapter 10 Deploying Our API (^_^)

Translation | "JavaScript Everywhere" Chapter 10 Deploying Our API ( ^_ )

Write at the top

Hello everyone, I am Mao Xiaoyou, a front-end development engineer. An English technical book is being translated.

In order to improve everyone's reading experience, the structure and content of sentences have been slightly adjusted. If you find any flaws in this article, or if you have any comments or suggestions, you can leave a message in the comment area, or add my WeChat: code_maomao, welcome to communicate and learn from each other.

(σﾟ∀ﾟ)σ…:*☆Oh, good

Chapter 10 Deploying Our API

Imagine that if a user wants APIto create, read, update or delete a note every time through ours , they must only use a personal computer. Currently, this is how we APIwork because it only runs on our personal computers. We can Websolve this problem by deploying the application to the server.

In this chapter, we will be divided into two steps:

1. First, we will create a APIremote database that we can access.

2. Second, we APIdeploy the code to the server and connect it to the database.

After completing these steps, we can use it to access from any networked computer (including the Webdesktop and mobile interface to be developed ) API.

Host our database

In the first step, we will use a managed database solution. For our Mongodatabase, we will use MongoDB Atlas.

This is Mongoa fully managed cloud product supported by a supporting organization. In addition, they provide a free experience that can implement our initial deployment well. Let us step through MongoDB Atlasthe steps to deploy to .

First, browse mongodb.com/cloud/atlasand create an account. After creating an account, you will be prompted to create a database. On this screen, you can manage the settings of the sandbox database, but I recommend using the default values ​​for now.

these are:

• Amazon's AWSas the database host, but also provides Google's cloud platform and Microsoft's Azure.

• Nearest area with "free tier" option.

• Cluster layer, the default value is " M0sandbox (sharing RAM, 512MBstorage)"

• Other settings, we can leave them as default settings.

• The cluster name, we can leave it as the default name.

Click "Create Cluster" from here. At this point, it Mongowill take a few minutes to set up the database (Figure 10-1).

Figure 10-1. MongoDB AtlasDatabase creation screen

Next, you will see the Clusterspage where you can manage your single database cluster (picture 10-2).

Graph 10-2MongoDB Atlascluster

On the "Cluster" screen, click "Connect" and you will be prompted to set up connection security. The first step is to IPwhitelist your address. Since our application will have a dynamic IPaddress, you need to use 0.0.0.0/0it to open it to any IPaddress. After all IPaddresses are whitelisted, you will need to set up a secure username and password to access the data (picture 10-3).

Figure 10-3.MongoDB Atlas IPwhitelist and user account management

After IPwhitelisting and creating a user account, you will choose the connection method for the database. In this case, it will be the "application" connection (pictured 10-4).

Figure 10-4. In MongoDB Atlasselecting the connection type

From here, you can copy the connection string. envfile (picture 10-5) that we will use in production .

Figure 10-5. MongoDB AtlasDatabase connection string

Mongo password

MongoDB AtlasPerform hexadecimal encoding for special characters in the password. This means that if you use (and should use!) any non-letter or numeric value, you will need to use the hexadecimal value of that code when adding the password to the connection string. The website ascii.clprovides corresponding hexadecimal codes for all special characters. For example, if your password is Pizz@ 2!. you will need to encode @ and! character. You can use% and then add the hexadecimal value. The password will be generated Pizz% 402%21.

With our MongoDB Atlasmanaged database up and running, we now provide a managed data store for our application. In the next step, we will host our application code and connect it to our database.

Deploy our application

Our next deployment setup is to deploy our application code. For the purposes of this book, we will use a cloud application platform Heroku. I chose Herokubecause of its superior user experience and free free package, but other cloud platforms (such as Amazon Web Services, Google Cloud Platform, Digital Oceanor Microsoft Azure) are to Node.jsprovide an alternative to the application hosting environment.

Before we start, you need to visit Herokuthe website and create an account. After creating an account, you need to install Herokucommand line tools for your operating system .

For in macOS, you can use the Homebrewfollowing installation Herokucommand line tools:

$ brew tap heroku/brew && brew install heroku

For Windowsusers, please visit the Herokucommand line tool guide and download the corresponding installer.

Project settings

After installing the Herokucommand line tool, we can Herokuset up the project on the website. By clicking "New" → "Create New Application" (Figure 10-6).

Figure 10-6. HerokuNew application dialog

Here, you will be prompted to specify a unique name for the application, and then click the "Create Application" button (pictured 10-7). Go on, you will see the qualified name whenever you use YOUR_APP_NAME.

Figure 10-7. Provide a unique application name

Now we can add environment variables. Similar to how we use our .ENVlocal files, we can Herokumanage our production environment variables in the website interface. To do this, click "Settings" and then the "Show Configuration Variables" button. In this screen, add the following configuration variables (picture 10-8):

NODE_ENV production
JWT_SECRET A_UNIQUE_PASSPHRASE
DB_HOST YOUR_MONGO_ATLAS_URL

Figure 10-8. HerokuEnvironment variable configuration

We are ready to deploy our code.

Deployment method

Now, we are ready to deploy the code to Herokuthe server. For this, we can use simple Gitcommands in the terminal application . We will Herokuset up as a remote endpoint, then add and submit changes, and finally push the code to Heroku. To do this, run the following command in the terminal application:

$ heroku git:remote -a <YOUR_APP_NAME>
$ git add .
$ git commit -am "application ready for production"
$ git push heroku master 

As you Herokubuild and deploy the file, you should see output in the terminal. When finished, we Herokuwill use package.jsonthe run script in the file to run our application on its server.

test

After successfully deploying our application, we will be able to make GraphQL APIrequests to our remote server . By default, it is GraphQL Playground UIdisabled in production, but we can use the curltest application in the terminal application . To run the curlrequest, enter the following in the terminal application:

$ curl \
  -X POST \
  -H "Content-Type: application/json" \
  --data '{ "query": "{ notes { id } }" }' \
  https://YOUR_APP_NAME.herokuapp.com/api 

If the test is successful, we will receive a notesresponse with an empty array, because our production database does not yet contain any data:

{
    
    "data":{
    
    "notes":[]}}

In this way, we have deployed the application!

in conclusion

In this chapter, we use cloud services to deploy the database and application code. MongoDB AtlasAnd Herokuother services enable developers to launch small applications and extend them to anywhere from hobby projects to high-traffic businesses. By deploying ours API, we have successfully developed the back-end service of the application stack. In the following chapters, we will focus on the application UI.

If there is any inadequate understanding, please correct me. If you think it's okay, please like to collect or share it, hoping to help more people.