如何在Digital Ocean上托管MEAN Stack应用

Software development involves certain steps to be repeated overtime for different projects.

软件开发涉及某些步骤,这些步骤需要为不同的项目加班。

One of those steps is setting up the infrastructure for your web applications.

这些步骤之一是为Web应用程序设置基础结构。

Since humans are easily annoyed with performing the same steps over and over, cloud computing is a giant leap towards saving humans the aforementioned annoyance.

由于一遍又一遍地执行相同的步骤很容易使人烦恼,因此云计算是向人类节省上述烦恼的巨大飞跃。

There are many services available that provide you with a point and click interface to set up your application's infrastructure within seconds, one of them is Digital Ocean.

有许多可用的服务为您提供指向和点击界面,可在几秒钟内设置您的应用程序的基础结构,其中之一就是Digital Ocean

In this tutorial, you will learn.

在本教程中,您将学习。

  1. Digital Ocean's main features.

    Digital Ocean的主要功能。
  2. How to create a droplet using Digital Ocean's one-click install apps.

    如何使用Digital Ocean的一键式安装应用程序创建Droplet。
  3. Logging in to your droplet.

    登录到您的Droplet。
  4. Using git to deploy your application.

    使用git部署您的应用程序。

谈数字海洋 ( A Word on Digital Ocean )

So what really is Digital Ocean? From Digital Ocean's official website.

那么什么是Digital Ocean? 从Digital Ocean的官方网站上

DigitalOcean is a cloud infrastructure provider focused on simplifying web infrastructure for software developers.

DigitalOcean是一家云基础架构提供商,致力于为软件开发人员简化Web基础架构。

Building software is complex, laying out the infrastructure to run software is even more complex.

构建软件非常复杂,布置运行软件的基础架构甚至更加复杂。

Digital Ocean provides you with options that allow you to lay out your application's infrastructure without a sweat.

Digital Ocean提供了多种选择,使您可以轻松布置应用程序的基础结构。

Some of it's key features are.

它的一些关键功能是。

  1. Servers use high performance solid state drives. Their speed greatly enhances your application's performance and setting up instances take less of your time.

    服务器使用高性能固态驱动器。 它们的速度极大地提高了应用程序的性能,并且建立实例花费的时间更少。
  2. They have a very intuitive control panel that helps you perform a range of tasks.

    他们具有非常直观的控制面板,可帮助您执行一系列任务。
  3. They have a very active community and their help pages are frequently updated and added to which means there is a great chance of help being readily available in case you get stuck.

    他们的社区非常活跃,其帮助页面会经常更新和添加,这意味着如果您遇到困难,很有可能会随时获得帮助。
  4. One-click installations allow you to spin up your preferred stack with a single click(as you will see later in this tutorial).

    一键式安装使您可以通过单击来旋转首选堆栈(如本教程后面所述)。

And the best among the lot is their prices are pretty easy on your wallet, starting at $5 per month.

而且其中最好的是它们的价格在您的钱包中非常容易,每月5美元起。

创建一个SSH密钥 ( Creating an SSH Key )

When we create our droplet, we are going to need to specify an SSH key in order to access it.

创建Droplet时,需要指定SSH密钥才能访问它。

So let us have it ready before creating the droplet. Fire up your terminal and execute the following command.

因此,让我们在创建小滴之前做好准备。 启动您的终端并执行以下命令。

$ ssh-keygen -t rsa

You will be prompted to enter the name of the file (with the full path) in which to save the key. This was shown to you when you generated the key and chose a place to save it. Usually the default is in your User folder and the /.ssh folder in there.

系统将提示您输入用于保存密钥的文件名(具有完整路径)。 当您生成密钥并选择一个保存位置时,会显示给您。 通常,默认设置在您的用户文件夹中,在/.ssh文件夹中是/.ssh文件夹。

Once you have done that, skip the passphrase section by hitting enter twice.

完成此操作后,请按两次Enter来跳过密码短语部分。

Your private and public key will be created and all the essential details will be prompted on the screen.

您的私钥和公钥将被创建,所有基本细节将在屏幕上提示。

The out of the `ssh-keygen -t rsa` command

The file that we are interested in, which will be used later when creating the droplet is the .pub file which is the public key that will be used for authentication. We will be using the contents of this file during the droplet creation process later.

我们感兴趣的文件(将在稍后创建.pub时使用)是.pub文件,这是将用于身份验证的公共密钥。 我们将在以后的小滴创建过程中使用此文件的内容。

Also, note down your computer's name using the hostname command.

另外,使用hostname命令记下计算机的名称。

注册帐号 ( Registering your Account )

Before we get started, you should have a fully functional Digital Ocean account.

在开始之前,您应该拥有一个功能齐全的Digital Ocean帐户。

Registering an account is pretty simple.

注册帐户非常简单。

Here is a walkthrough of the registration process.

这是注册过程的演练。

  1. Adding your personal details along with your email address.

    添加您的个人详细信息以及您的电子邮件地址。
  2. Verifying your account using the email sent at your provided email address in step one.

    使用第一步中通过您提供的电子邮件地址发送的电子邮件验证您的帐户。
  3. Adding your credit card details.

    添加您的信用卡详细信息。

At the time of this writing, Digital Ocean only accepts credit cards. Debit cards and prepaid cards such as Payoneer will not work so be sure to have a credit card before getting started.

在撰写本文时, Digital Ocean仅接受信用卡。 借记卡和预付卡(例如Payoneer)将无法使用,因此在开始使用前请确保拥有信用卡。

创建你的Droplet ( Creating your Droplet )

Once you have registered your account, move to the Droplets section at the dashboard and click the Create Droplet button.

注册帐户后,移至仪表板的“ Droplet”部分,然后单击“ 创建Droplet”按钮。

Droplets section

In my case, I have not yet created a single droplet so your Droplet section may differ slightly considering you have created other droplets before.

就我而言,我尚未创建单个小滴,因此考虑到您之前创建的其他小滴,您的“小滴”部分可能会略有不同。

Nonetheless, in either case, you should have the Create Droplet button.

但是,无论哪种情况,都应具有“ 创建液滴”按钮。

The Create Droplets section further gives you the option to setup your application from scratch using the Distributions tab or use ready to use stacks under the One-click apps section.

创建小滴”部分进一步为您提供了以下选项:使用“ 分发”选项卡从头开始设置应用程序,或在“ 一键式应用程序”部分下使用即用型堆栈。

Distributions section

We are going to use the MEAN 0.5.0 on 16.04 stack.

我们将在16.04堆栈使用MEAN 0.5.0

One-Click apps section

One-click apps provide a ready to use infrastructure configuration where our application's environment is set up for us and we only need to focus on application deployment and stability.

一键式应用程序提供了现成的基础架构配置,可以在其中为我们设置应用程序的环境,而我们只需要关注应用程序的部署和稳定性。

Once you have clicked MEAN 0.5.0 on 16.04, scroll down to move to the Choose a size section.

单击16.04的MEAN 0.5.0后 ,向下滚动以移至“ 选择尺寸”部分。

Choose size section

Choosing a size depends on the type of application you intend to deploy so you will need to use a bit of your imagination to get through this part.

选择大小取决于您打算部署的应用程序的类型,因此您将需要花些力气才能完成这一部分。

For example, if you are deploying a high traffic image service that provides cropping and resizing features to it's users, you will need a high end configuration with lots of CPUs and disk space.

例如,如果要部署向其用户提供裁剪和调整大小功能的高流量映像服务,则将需要具有大量CPU和磁盘空间的高端配置。

Similarly, a REST API can do with a medium configuration machine.

同样,REST API可以与中等配置计算机一起使用。

For our case, we are going to specify the very first $5/mo configuration with 1 CPU, 512MB RAM, 20GB SSD disk, and 1000GB data transfer.

对于我们的情况,我们将指定第一个$ 5 / mo配置,带有1个CPU,512MB RAM,20GB SSD磁盘和1000GB数据传输。

Skip the Add block storage section.

跳过添加块存储部分。

The Choose a datacenter region section allows you to specify the physical location of your application.

选择数据中心区域部分使您可以指定应用程序的物理位置。

Choose data center section

In our case, it is really upto your personal preference as we are deploying a single instance of our application. However, remember that this option is used in case you wish to deploy multiple instances of your application.

对于我们来说,这实际上取决于您的个人喜好,因为我们正在部署应用程序的单个实例。 但是,请记住,如果您希望部署应用程序的多个实例,请使用此选项。

It helps reduce network latency as your users can be served from the nearest located instance of the application.

由于可以从距离应用程序最近的实例为用户提供服务,因此它有助于减少网络延迟。

It can also help to have your application in multiple physical locations in case of a natural disaster such as an earthquake.

如果发生自然灾害(例如地震),它还可以帮助您将应用程序部署在多个物理位置。

For some strange reason, I have always loved Germany hence I have chosen the Frankfurt datacenter.

由于某些奇怪的原因,我一直爱德国,因此选择了法兰克福数据中心。

You can skip the Select additional options section as well but if you are curious, you can hover over each option to view it's description.

您也可以跳过“ 选择其他选项”部分,但是如果您有好奇心,可以将鼠标悬停在每个选项上以查看其描述。

Moving to the Add your SSH keys section, we need to create an SSH key for our droplet in order to initiate remote shell sessions.

转到“ 添加您的SSH密钥”部分,我们需要为我们的Droplet创建一个SSH密钥,以便启动远程Shell会话。

Add your SSH key section

It is a recommended security practice and whenever dealing with server communication, you should opt for it.

建议采取安全措施,每当处理服务器通信时,都应选择这样做。

Click the New SSH Key button.

单击新建SSH密钥按钮。

New SSH key section

In the New SSH Key form's SSH key content field, paste in the contents of the .pub file that we created in the Creating an SSH Key section.

在“ 新建SSH密钥”表单的SSH密钥内容字段中,粘贴我们在“ 创建SSH密钥”部分中创建.pub文件的内容。

Also paste in the output of the hostname command in the Name field.

还要在“ 名称”字段中粘贴hostname命令的输出。

Click the Add SSH Key button to create your SSH key.

单击添加SSH密钥按钮以创建SSH密钥。

Finally, we need to specify the number of droplets and the hostname(for our droplet) in the Finalize and create section.

最后,我们需要在“ 完成并创建”部分中指定小滴的数量和主机名(对于我们的小滴)。

Finalize and create section

You can also add tags to easily identify your droplet such as the application's name.

您还可以添加标签以轻松识别液滴,例如应用程序的名称。

Click the Create button.

单击创建按钮。

You will be taken back to the Droplets section where you will be shown the progress of the droplet creation process.

您将回到“小滴”部分,其中将显示小滴创建过程的进度。

Droplet progress

登录到您的Droplet ( Logging in to your Droplet )

Once your droplet is up and running, you can log in to it via SSH.

一旦您的Droplet启动并运行,您就可以通过SSH登录它。

Secure Socket Shell, also called Secure Shell is just a fancy name for logging into your server's terminal.

安全套接字外壳,也称为安全外壳,只是用于登录服务器终端的一个奇特的名称。

It allows server administrators to execute commands on target machines remotely.

它允许服务器管理员在目标计算机上远程执行命令。

Execute the following command to create a remote terminal session to your droplet.

执行以下命令以创建到Droplet的远程终端会话。

$ssh -i <path-to-your-key-file> root@<your-droplet-ip>

You can recall the path of the key file from the Creating an SSH Key section. Generally, it is the path of your public key file without the .pub extension.

您可以从“ 创建SSH密钥”部分重新调用密钥文件的路径。 通常,它是没有.pub扩展名的公钥文件的路径。

You droplet IP address is visible next to your droplet in the Droplets section.

您的小滴IP地址在“小滴”部分中的小旁边可见。

Droplet IP

You will be prompted with a welcome message, followed by a blinking cursor ready to accept your commands.

系统将提示您欢迎消息,然后闪烁的光标准备接受您的命令。

Welcome message

Let us execute a few commands to make sure everything was setup correctly.

让我们执行一些命令以确保所有设置均正确。

# view Node version
root@scotch-mean-tutorial:~# node -v
v6.9.2
# view NPM version
root@scotch-mean-tutorial:~# npm -v
3.10.9

Node and NPM seems to be working correctly.

节点和NPM似乎正常工作。

Our droplet has a sample application that we can run to test things out.

我们的小滴有一个示例应用程序,我们可以运行它来测试事物。

# sample application is located at /opt/mean
root@scotch-mean-tutorial:~# cd /opt/mean
# start sample application
root@scotch-mean-tutorial:~# npm start

> meanjs@0.5.0 start /opt/mean
> gulp

[11:59:47] Using gulpfile /opt/mean/gulpfile.js
[11:59:47] Starting 'default'...
[11:59:47] Starting 'env:dev'...
                         .
                         .
                         .
MEAN.JS - Development Environment

Environment:     development
Server:          http://0.0.0.0:3000
Database:        mongodb://localhost/mean-dev
App version:     0.5.0
MEAN.JS version: 0.5.0
--

Notice that our application runs on port 3000.

请注意,我们的应用程序在端口3000上运行。

Point your browser to http://<your-droplet-ip>:3000 and you will see the sample application's welcome page.

将浏览器指向http://<your-droplet-ip>:3000 ,您将看到示例应用程序的欢迎页面。

Application homepage

The sample application is pretty functional with a signin and signup page.

该示例应用程序具有登录和注册页面的功能。

Application sign in page

App signup page

Go ahead and have a play!

继续玩吧!

MEAN.JS ( MEAN.JS )

MEAN is an acronym for MongoDB, ExpressJS, AngularJS, and Node.

MEAN是MongoDB,ExpressJS,AngularJS和Node的首字母缩写。

They are separate modules that need to be set up if you wish to create an application that runs on this stack.

它们是单独的模块,如果您要创建在此堆栈上运行的应用程序,则需要设置它们。

Just like Digital Ocean's one-click MEAN stack installation installs the necessary software to host a MEAN stack application. Similarly, MEAN.JS sets up all the boilerplate code you need to get started with a MEAN stack application.

就像Digital Ocean的一键式MEAN堆栈安装一样,它会安装必要的软件来托管MEAN堆栈应用程序。 同样, MEAN.JS设置了开始使用MEAN堆栈应用程序所需的所有样板代码。

If you are interested in the concept, MEAN.JS's Github page has all the details you need to get started.

如果您对该概念感兴趣,则MEAN.JS的Github页面包含您开始需要的所有详细信息。

托管节点应用程序 ( Hosting Node Applications )

It's nice to be alive in a time when mostly all major web programming languages provide a built-in server that can be used to quickly start your application during development and testing.

在大多数主要的Web编程语言都提供内置服务器的情况下活着很高兴,该服务器可用于在开发和测试期间快速启动您的应用程序。

However, it is a bit risky and impractical to run your applications on the language's built in server.

但是,在该语言的内置服务器上运行您的应用程序有点冒险且不切实际。

A simple case in point.

一个简单的例子。

Web server softwares are built to function as full fledged web servers and allow complete control to the publisher through configuration files and runtime options.

Web服务器软件被构建为可以用作完整的Web服务器,并允许通过配置文件和运行时选项对发布者进行完全控制。

For example, what if you need to configure the maximum POST data size? It is inefficient to handle it using your application's file upload code and to let a request go through if it does not fulfill this configuration requirement.

例如,如果您需要配置最大POST数据大小该怎么办? 使用应用程序的文件上载代码来处理它,如果不满足此配置要求,则让请求通过是低效率的。

Generally, in this case, we set up a reverse proxy to our application using a web server software.

通常,在这种情况下,我们使用Web服务器软件为应用程序设置反向代理。

We are going to see how we can do this using the Nginx web server.

我们将看到如何使用Nginx Web服务器做到这一点。

Execute the following command to install Nginx.

执行以下命令安装Nginx。

root@scotch-mean-tutorial:~# sudo apt-get install nginx

Next, configure Nginx using the /etc/nginx/sites-available/default file.

接下来,使用/etc/nginx/sites-available/default文件配置Nginx。

server{
    listen 80;

    server_name <your-droplet-ip>;

    location / {
        proxy_pass http://<your-droplet-ip>:3000;
        proxy_http_version 1.1;
        proxy_set_header Upgrade $http_upgrade;
        proxy_set_header Connection 'upgrade';
        proxy_set_header Host $host;
        proxy_cache_bypass $http_upgrade;
    }
}

Restart Nginx service by executing the command sudo service nginx restart.

通过执行命令sudo service nginx restart重新启动Nginx服务。

Point your browser to http://<your-droplet-ip> and you will see the sample application's welcome page again.

将浏览器指向http://<your-droplet-ip> ,您将再次看到示例应用程序的欢迎页面。

Specifying the IP address only without the need to add port 3000 shows Nginx was setup correctly.

仅指定IP地址而无需添加端口3000表明Nginx已正确设置。

In other words, web browsers forward requests to port 80 by default and since we have Nginx running on port 80 ready to forward requests to the Node application, everything works as expected.

换句话说,默认情况下,Web浏览器将请求转发到端口80 ,并且由于我们在端口80上运行了Nginx,可以将请求转发到Node应用程序,因此一切正常。

使您的应用程序保持活力 ( Keeping your Application Alive )

In the previous section, we saw why it is not a good idea to depend on Node's built-in server. There is one more caveat to add to the equation.

在上一节中,我们了解了为什么不依赖Node的内置服务器不是一个好主意。 需要向方程式添加更多警告。

Generally, a Node server does not restart itself.

通常,节点服务器不会自行重启。

Why would you need to restart a Node server, here is a little background.

为什么需要重启节点服务器,这里有一些背景知识。

When you write applications, there is always a chance you may miss a few error scenarios to handle in your code. For example, division by zero or a 404 response by a third party API.

当您编写应用程序时,总是有可能会错过一些错误情况以在代码中处理。 例如,除以零或使用第三方API进行404响应。

In such cases, when exceptions are raised, a Node application breaks down and execution is halted.

在这种情况下,当引发异常时,Node应用程序将崩溃并停止执行。

Unless you plan to watch your application logs twenty four hours a day, you need to setup an environment where your application keeps running or is restarted in case of errors.

除非您打算每天观看应用程序日志二十四小时,否则您需要设置一个环境,在该环境中应用程序可以继续运行或在发生错误时重新启动。

PM2 is a Node process manager that allows you to run your applications as a service in the background which is restarted whenever it goes down.

PM2是Node进程管理器,它使您可以在后台将应用程序作为服务运行,并在出现故障时重新启动。

Execute the following command in your droplet to install PM2 globally.

在您的Droplet中执行以下命令以全局安装PM2。

root@scotch-mean-tutorial:~# npm install -g pm2

Then on, simply pass your application's root file to the pm2 start command.

然后,只需将应用程序的根文件传递给pm2 start命令。

root@scotch-mean-tutorial:~# pm2 start app.js

部署您的应用 ( Deploying your Application )

The last part we are going to look at is how to deploy your application to the droplet.

我们要看的最后一部分是如何将应用程序部署到Droplet。

The sample application I am going to deploy has been taught to build in one of the previous tutorials by Ahmed Haque.

Ahmed Haque在先前的教程之一中教过我将要部署的示例应用程序

We can securely copy our application to the droplet using the scp command.

我们可以使用scp命令将应用程序安全地复制到scp

However, that is a bit inefficient so we are going to use git.

但是,这有点低效,因此我们将使用git。

First, fork the sample application using Github.

首先,使用Github分支示例应用程序

Fork

Next, we are going to pull a copy of the code to our droplet at /opt/mean using the repository URL.

接下来,我们将使用存储库URL将代码的副本拉到/opt/mean滴中。

Repository URL

Be sure to remove the sample application first.

确保先删除示例应用程序。

# remove sample application
$ rm -rf /opt/mean
# move to /opt
$ cd /opt
# cloning repository at /opt/mean
$ git clone https://github.com/<your-git-username>/MeanMapAppV2.0.git "mean"

Move to the project root.

移至项目根目录。

$cd /opt/mean

Install NPM modules.

安装NPM模块。

$npm install

Finally, execute the following command to start your application using PM2.

最后,执行以下命令以使用PM2启动您的应用程序。

$ pm2 start server.js

Point your browser to http://<your-droplet-ip> and you should see the application's home page.

将浏览器指向http://<your-droplet-ip> ,您应该看到该应用程序的主页。

幕布 ( Curtains )

In this tutorial, you saw how easy it is to launch a MEAN stack application using Digital Ocean.

在本教程中,您了解了使用Digital Ocean启动MEAN堆栈应用程序有多么容易。

I encourage you to explore Digital Ocean further and dive in deep with the sharks (see what I did there?).

我鼓励您进一步探索“数字海洋”,并潜入鲨鱼的深处(看看我在那儿做了什么?)。

I hope you found this tutorial interesting and knowledgeable. Until my next piece, happy coding!

我希望您发现本教程有趣且知识丰富。 直到我的下一篇文章,祝您编程愉快!

翻译自: https://scotch.io/tutorials/how-to-host-a-mean-stack-app-on-digital-ocean

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值