在5分钟内在Digital Ocean上安装由Cosmic驱动的Nuxt.js应用

最新推荐文章于 2024-09-16 07:22:40 发布

dfsgwe1231

最新推荐文章于 2024-09-16 07:22:40 发布

阅读量297

点赞数

文章标签： javascript 运维开发工具 ViewUI

开发人员钟爱的托管服务提供商Digital Ocean提供了一个高度直观的界面，用于部署和管理应用程序基础结构。在本教程中，我将向您展示如何在Digital Ocean上安装和部署由Cosmic驱动的 Nuxt.js应用程序。只需几个命令和几分钟，您就可以在可扩展的Digital Ocean Droplet上使用Cosmic驱动的应用程序启动并运行，以进行团队协作。

入门

首先，让我们回顾一下将在Digital Ocean Droplet上安装的内容。我们将安装：

创建液滴

转到https://www.digitalocean.com进行登录/注册。登录后，创建一个新的Droplet。我建议使用2GB内存的Ubuntu。然后点击“创建”。

设置你的Droplet

创建Droplet之后，您应该已经收到一封包含SSH登录名和密码说明的电子邮件。

SSH进入您的Droplet
使用选择的命令行工具以及发送给您的信息登录到服务器。

ssh root @your-droplet-ip
Enter your password: the-password-they-emailed-to-you

安装Node.js
现在，您已经登录到Droplet，首先使用以下命令安装Node.js版本10 ：

curl -sL http s: // deb .nodesource. com /setup_10. x | sudo -E bash -
sudo apt- get install - y nodejs

检查是否已安装Node.js：

nodejs -v # this should output v10.x.x

安装Cosmic CLI

如果尚未创建免费的Cosmic JS帐户，请创建一个。

现在，您可以安装Cosmic CLI ，这是一个功能强大的工具，可帮助您搭建新项目并在Cosmic JS帐户中执行操作。

npm i -g cosmic-cli

登录并安装应用

接下来，我们需要通过CLI登录到Cosmic JS。使用以下命令登录后，输入您的电子邮件和密码：

cosmic login

如果转到Nuxt.js网站样板应用程序页面，您会注意到只有一个命令可以安装此应用程序。运行以下命令：

cosmic install -app nuxtjs-website-boilerplate

然后，系统将提示您创建新的存储桶或选择现有的存储桶。选择“创建新存储桶”并为存储桶添加标题。此时，将会发生两件事：将示例内容导入到您新创建的Bucket中，并将Nuxt.js应用程序代码下载到您的Digital Ocean Droplet中。然后，您将看到安装状态：

Success!
App code located at /root/nuxtjs-website-boilerplate

运行以下命令以启动应用程序：

cosmic start -app

一旦看到状态“ OPEN http：// localhost：3000 ”，便会构建您的应用程序，然后可以在端口3000上使用Droplet IP来查看您的应用程序（请参阅下面的屏幕快照找到您的Droplet IP地址）。

因此，请看上面的屏幕截图，我将转到http://167.99.234.7:3000，然后看到该应用程序：

安装Nginx

现在我们已经安装了我们的应用程序，让我们安装Nginx 。 Nginx将使我们的应用程序可以在端口80（这是分配给在http的域上运行的网站的端口）上运行。这将使我们能够仅通过IP地址（无端口）查看应用程序，并将域指向IP。

停止正在运行的应用程序（Control + C），然后运行以下命令来安装Nginx：

sudo apt- get install -y nginx

接下来，我们将Nginx配置为从端口80到端口3000运行代理：

sudo rm /etc/nginx/sites-enabled /default
 sudo vim /etc/nginx/sites-available/cosmicjs

并编辑此文件，使其看起来完全像这样：

server {
    listen 80 ;
    server_name example.com;
    location / {
        proxy_set_header   X-Forwarded-For $remote_addr;
        proxy_set_header   Host $http_host;
        proxy_pass         "http://127.0.0.1:3000" ;
    }
}

注意，我们将proxy_pass设置为端口3000，这允许Nginx通过将端口80上的所有传入请求转发到端口3000上的Node.js应用程序来充当反向代理。

接下来，我们需要将配置符号链接到sites-enabled了sites-enabled ，以便Nginx使用它，因为它当前在sites-available ：

sudo ln -s /etc/ nginx /sites-available/ cosmicjs /etc/ nginx /sites-enabled/ cosmicjs

重新启动Nginx

现在我们需要重新启动Nginx以应用更改：

sudo  service  nginx restart

现在再次运行启动命令：

cosmic start -app

应用启动后，转到您的IP地址（不带端口号），您应该会看到应用程序运行正常，URL中没有端口号。

此时，您可能需要在后台运行此过程。为此， PM2是一个很好的解决方案。

添加您的域

准备将域名添加到网站时，您需要做两件事：

转到您的域名注册商，然后将IP地址添加到您的姓名记录中。
从上方（您的服务器名）将您的域添加到您的Nginx配置中，然后重新启动Nginx，您的网站开始运行了！

邀请团队成员

要邀请团队成员帮助管理内容，请登录Cosmic JS并转至您的存储桶>用户。或运行以下命令通过Cosmic CLI邀请团队成员！

cosmic  add-user  --email someone@myteam.com --role editor

结论

Digital Ocean是一家直观的应用程序托管服务提供商，可快速轻松地拆分服务器。借助Cosmic JS随附的工具，您可以将网站连接到CMS，该网站已在Digital Ocean上启动，可以在几分钟之内与您的团队成员共享。如果您对Cosmic驱动的应用程序有任何疑问，请在Slack上加入对话，并在Twitter上与我们联系。期待看到您的建造！