如何在UbuntuVPS上安装和配置基于Web的IDECodiad

来自菜鸟教程
跳转至:导航、​搜索

状态: 已弃用

本文介绍了不再受支持的 Ubuntu 版本。 如果您当前正在运行运行 Ubuntu 12.04 的服务器,我们强烈建议您升级或迁移到受支持的 Ubuntu 版本:

原因: Ubuntu 12.04 已于 2017 年 4 月 28 日终止生命周期 (EOL) and no longer receives security patches or updates. This guide is no longer maintained.

请参阅: 本指南可能仍可用作参考,但可能不适用于其他 Ubuntu 版本。 如果可用,我们强烈建议使用为您正在使用的 Ubuntu 版本编写的指南。 您可以使用页面顶部的搜索功能来查找更新的版本。


安装

虽然大多数开发人员都有首选的开发环境并拥有熟悉的特定工具和流程,但如果不在您通常的位置,这有时会发生故障。 幸运的是,有像 Codiad 这样的项目可以帮助您在任何地方通过 Web 访问来开发您的项目。

Codiad 是一个完整的 IDE(集成开发环境),可以通过任何 Web 浏览器访问。 您可以使用多种不同语言处理多个项目,甚至可以访问基于 Web 的项目的实时预览。 IDE 包括文件管理、自动语法突出显示和用于扩展功能集的出色插件系统。

在本指南中,我们将讨论如何在 Ubuntu 12.04 VPS 实例上启动和运行 Codiad。

安装 PHP 和 Apache

由于该项目基本上是一个独立的 Web 目录,因此我们需要设置一个 Web 服务器和 PHP 处理以使其运行。

让我们从安装组件开始。 让我们更新我们的包数据库,然后安装所需的包。 我们还将安装 git 因为我们稍后会需要它:

sudo apt-get update
sudo apt-get install apache2 php5 libapache2-mod-php5 php5-mcrypt git

安装软件后,我们需要编辑一些值。 首先,让我们打开一个文件并告诉 Apache Web 服务器在获取目录列表时我们希望使用 PHP 文件而不是 HTML:

sudo nano /etc/apache2/mods-enabled/dir.conf

DirectoryIndex 中间删除 index.php 行并将其移到前面,如下所示:

 
      DirectoryIndex <span class="highlight">index.php</span> index.html index.cgi index.pl index.xhtml index.htm

保存并关闭文件。

配置 Apache 虚拟主机

现在,我们需要修改我们的虚拟主机文件,以便我们可以为我们的 IDE 文件添加一个位置。 现在使用 root 权限打开默认的 Virtual Hosts 文件:

sudo nano /etc/apache2/sites-available/default

VirtualHost 部分中,在任何其他 Directory 部分之外,我们需要添加一个额外的目录部分,其中包含有关我们正在设置的项目的信息。

我们将把 Codiad 目录放在我们的主目录中,以便我们可以轻松访问我们的文件,因此在以下配置中使用您的用户名而不是 demouser。 我们将创建一个别名,然后为目录创建规则:

. . . 选项索引 FollowSymLinks MultiViews AllowOverride None Order allow,deny allow from all
<span class="highlight">Alias /codiad /home/demouser/Codiad</span>
<span class="highlight">&lt;Directory "/home/demouser/Codiad"&gt;</span>
        <span class="highlight">Options -Indexes FollowSymLinks MultiViews</span>
        <span class="highlight">AllowOverride All</span>
        <span class="highlight">Order allow,deny</span>
        <span class="highlight">allow from all</span>
<span class="highlight">&lt;/Directory&gt;</span>

ScriptAlias /cgi-bin/ /usr/lib/cgi-bin/
. . .

完成后保存并关闭文件。

完成后重新启动 Apache:

sudo service apache2 restart

下载和配置项目文件

现在,我们需要获取实际的 Codiad 文件。 我们将把文件夹放在我们的主目录中。 我们可以从他们的 GitHub 页面 获取项目。

首先,切换到你的主目录,然后克隆项目:

cd ~
git clone https://github.com/Codiad/Codiad.git

这将在您的主目录中创建一个名为 Codiad 的目录。 现在进入该目录:

cd Codiad

在这里,将示例配置文件复制到生产环境中:

cp config.example.php config.php

目前,该目录中的所有文件都归我们的普通用户所有(本例中为 demouser)。 群主也是我们的用户群。 我们需要将一些选定部分的组所有权转移给我们的 Web 服务器用户。

我们可以通过键入:

sudo chown :www-data config.php workspace/ plugins/ themes/ data/

这将允许我们的 Web 服务器写入一些资源,这对于应用程序的正确功能是必需的。

密码保护 IDE 接口

由于我们需要允许对某些文件夹和文件的写入权限,我们可以通过设置一些密码保护来增加额外的安全层。 我们可以通过在我们的应用程序目录之外创建一个密码文件来做到这一点,然后使用它来授权用户。

让我们在 Apache 配置目录中创建密码文件。 我们称之为codiad.passwd。 我们可以添加我们的用户名并通过键入以下内容创建此文件:

sudo htpasswd -c /etc/apache2/codiad.passwd用户名

系统将要求您选择并确认用户授权密码。 然后,该实用程序对您的密码进行哈希处理并将其输入到文件中。 我们可以通过键入:

cat /etc/apache2/codiad.passwd

demouser:$apr1$wYcm/kRQ$6EGOoj.pYRnYxvddNbIdN0

让我们锁定它,以便只有 root 和 Web 服务器可以访问这个文件:

sudo chown root:www-data /etc/apache2/codiad.passwd
sudo chmod 0640 /etc/apache2/codiad.passwd

现在,让我们在 app 目录中创建一个 .htaccess 文件,该文件将引用此文件以进行授权。

cd ~/Codiad
nano .htaccess

在这个文件中,我们需要引用我们创建的密码文件,然后给出密码提示信息。 最好不要提供太多关于提示背后的服务的具体信息:

AuthUserFile /etc/apache2/codiad.passwd
AuthGroupFile /dev/null
AuthName "Authentication required.  Please enter credentials"
AuthType Basic
Require valid-user

完成后保存并关闭文件。

现在,为了安全起见,让我们再次重新启动 Apache:

sudo service apache2 restart

使用 Codiad

我们的配置现在已经完成,我们的 IDE 应该可用了。 要访问您的新 IDE,您需要在 Web 浏览器中访问服务器的域名或 IP 地址,后跟 /codiad

http://your_domain.com / codiad

您将看到一个身份验证请求。 这是我们使用密码文件和 .htaccess 文件设置的 Apache 级别身份验证:

输入您配置的凭据。 之后,您将进入初始设置屏幕:

从这里,我们可以设置一个 Codiad 用户帐户,并开始一个项目。 对于“文件夹名称或绝对路径”,最好选择与您的项目名称匹配的名称。 完成后单击“安装”按钮。

您将被带到一个登录屏幕,您应该在其中输入刚刚创建的帐户详细信息:

您现在将看到您的基本 IDE 界面:

探索界面

让我们稍微了解一下界面。

在左侧,我们有我们的项目侧栏。 顶部显示了我们的根项目目录以及我们可能已经创建或移动到该文件夹的任何文件和文件夹:

您可以通过右键单击项目文件夹或此窗格中的任何其他项目来访问菜单以创建文件和文件夹并操作属性:

底部显示项目窗格,其中列出了我们所有可用的项目。 您可以通过单击“+”按钮创建新项目,并且可以通过双击每个项目在项目之间切换。

如果您创建一个新项目,您实际上可以直接从可公开访问的 git 存储库中拉取整个项目:

窗口的主要部分是编辑器本身。 您可以在此处查看您的代码,并有一些用于格式化和语法高亮的选项。 双击左侧边栏中的文件以在编辑器中打开它们:

在底部,您可以选择编辑器设置、拆分窗口以同时查看多个文件以及调整语法。

在右侧,我们有一个延伸到管理侧边栏的拉动标签:

您可以在这里管理您的项目和用户、更新 Codiad、安装插件、更改密码等。 这甚至是您保存文件所需的界面。

如果您想保持此界面处于打开状态,可以单击面板左上角的两个箭头。 这会将其更改为锁定符号,这将使面板保持打开状态,使您可以轻松访问设置和保存选项。

结论

您现在应该可以使用新的基于浏览器的 IDE 启动并运行。 Codiad 有许多不同的扩展,可以增强编辑器的功能。 例如,有一个简化的终端界面来管理文件,以及一个协作扩展,允许您与团队的其他成员共享您的项目。

探索界面,看看增加的灵活性是否可以帮助您在任何地方工作。

贾斯汀·艾林伍德