Skip to content
This repository has been archived by the owner on Jan 17, 2020. It is now read-only.

Ubuntu 14.04 plus frontend guide

Jump to bottom
mrpavlikov edited this page Sep 16, 2014 · 35 revisions

Содержание

1. Ubuntu: установка

Ubutnu можно поставить единственной системой или параллельно с Windows. Если Вы хотите иметь обе ОС, и Windows еще не стоит, его следует установить первым, иначе он затрет загрузчик Ubuntu.

Скачиваем дистрибутив Ubuntu, режем DVD (можно флешку, но DVD надежнее), грузимся с него и устанавливаем. Чтобы поставить Ubuntu совместо с Windows выбираем Install Ubuntu alongisde Windows. Если вы хотите разбить диск самостоятельно, например Windows стоит на ssd, а на hdd Вы хотите поставить Ubuntu, то можно выбрать пункт something else и следовать инструкции с пункта 7.

Инструкция по установке с официального сайта: http://www.ubuntu.com/download/desktop/install-ubuntu-desktop

2. Ubuntu: после установки

2.1 Tilda

Tilda — терминал, доступный в любой момент времени по горячей клавише. Ее удобно для сиюминутных действий (действия с git и т.д.), а какой-нибудь gulp или compass можно запустить в обычном терминале.

2.1.1 терминал

Открываем стандартный терминал с помощью сочетания клавиш:

ctrl + alt + t

Меняем цвет терминала:

Edit -> Profile Preferences -> Colors

Убираем галку с Use colors from system theme, ставим Green on Black

2.1.2 установка

Устанавливаем:

sudo apt-get install tilda

Ищем в Dash: нажимаем клавишу Super, пишем Tilda, запускаем

Главное меню (Dash)

Меню в котором можно воспользоваться поиском как по локальным (установленные приложения, файлы и папки, музыка), так и по удалённым (доступные для установки приложения, видео на YouTube).

dash

2.1.3 настройка

В настройках меняем:

  1. Ставим галку на Start Tilda hidden
  2. Во вкладке Appearance ставим height 30% и width 100%
  3. В Extras включаем прозрачность: Enable Transparency
  4. Там же устанавливаем уровень прозрачности на свой вкус Level of Transparency
  5. Во вкладке Сolors ставим тему Green on Black

Теперь по хоткею F1 на любом рабочем столе будет открываться терминал

2.1.4 автозапуск

Ищем в Dash приложение Startup Applications, жмем Add, указываем:

Поле Значение
Name: Tilda
Command: tilda

2.2 Restircted extras

help.ubuntu.ru:

К сожалению, в Ubuntu по умолчанию не входят библиотеки поддержки многих популярных форматов мультимедиа-файлов, а так же некоторые другие нужные программы, например, flash-плагин для интернет-браузера и набор шрифтов Microsoft. Поэтому всё это необходимо ставить дополнительно из репозиториев.

sudo apt-get install ubuntu-restricted-extras

2.3 Unity Tweak Tool

По умолчанию Ubuntu поставляется окружением рабочего стола Unity. Будем ориентироваться на него. Установим твикер:

sudo apt-get install unity-tweak-tool

Запускаем, правим

  • Launcher -> Search: ускоряем поиск приложений убирая галки с
    • Search online sources
    • Show "More Suggestion"
    • Enable search of your files
  • Switcher -> убираем Display "Show Desktop" icon из alt + tab

2.4 System update

Обновляем систему

sudo apt-get update && sudo apt-get upgrade

2.5 Workspaces: рабочие столы

Включаем дополнительные рабочие столы: в Dash вводим appearance, во вкладке Behavior отмечаем галку Enable workspaces.

Теперь можно переключать рабочий стол по сочетанию клавиш:

Ctrl + Alt + Стрелка

Перетащить окно между рабочими столами можно с помощью:

Ctrl + Alt + Shift + Стрелка

Посмотреть остальные хоткеи можно зажав клавишу Super.

Я, например, организую рабочие столы так

  1. Браузеры
  2. Редактор
  3. Терминалы
  4. Почта и прочее

2.6 Software

Скачиваем и устанавливаем следующие программы:

3. LAMP

Wikipedia:

LAMP — акроним, обозначающий набор (комплекс) серверного программного обеспечения, широко используемый во Всемирной паутине. LAMP назван по первым буквам входящих в его состав компонентов:

  • Linux — операционная система Linux;
  • Apache — веб-сервер;
  • MariaDB / MySQL — СУБД;
  • PHP — язык программирования, используемый для создания веб-приложений (помимо PHP могут подразумеваться другие языки, такие как Perl и Python).

Если Вы до этого использовали Windows, то, скорее всего локальные веб-серверы обслуживал Denwer. Теперь же мы установим все, как на настоящих серверах.

3.1 Apache

Устанавливаем Apache 2:

sudo apt-get install apache2

Проверяем, что Apache установился, зайдя в браузере по адресу http://localhost.

localhost

Все веб-серверы будут лежать внутри папки /var/www, добавляем ее в закладки Nautilus (проводника) для быстрого доступа:

Computer -> var -> www -> нажимаем Ctrl + D

Теперь папка /var/www должна появиться во вкладке Bookmarks, между Devices и Network.

favorites

3.1.1 .htaccess

По умолчанию файлы .htaccess отключены, включим их отредактировав конфигурационный сервер Apache:

sudo gedit /etc/apache2/apache2.conf

Ищем в нем настройки папки /var/www:

<Directory /var/www/>
    Options Indexes FollowSymLinks
    AllowOverride None
    Require all granted
</Directory>

Заменим в ней директиву AllowOverride:

AllowOverride All

После изменения любых настроек в конфиге Apache его нужно перезапустить, чтобы изменения вступили в силу:

sudo service apache2 restart

3.1.2 mod_rewrite

Включим модуль рерайтов, без него работает редкий сайт:

sudo a2enmod rewrite && sudo service apache2 restart

3.1.3 AddDefaultCharset utf-8

Устанавливаем Apache в качестве кодировки по умолчанию utf-8:

sudo gedit /etc/apache2/conf-available/charset.conf

Нужно раскомментировать строчку, убрав #

AddDefaultCharset utf-8

И, конечно же, перезапускаем Apache:

sudo service apache2 restart

3.2 MySql

Устанавливаем mysql. В процессе установки Вас попросят ввести root'овый пароль для базы.

sudo apt-get install mysql-server php5-mysql

Создаем структуру базы данных:

sudo mysql_install_db

Удаляем default'ные настройки:

sudo mysql_secure_installation

Сначала вводим пароль, который указали при установке, на вопрос Change the root password отвечаем n, на остальные вопросы отвечаем по умолчанию (то, что выделено большой буквой).

Проверяем установку, вводим три команды (первая попросит пароль от базы данных):

mysql -uroot -p
mysql> show databases;
+--------------------+
| Database           |
+--------------------+
| information_schema |
| mysql              |
| performance_schema |
+--------------------+
3 rows in set (0.00 sec)

exit

3.2.1 mysql и utf-8

Редактируем конфиг mysql.

sudo gedit /etc/mysql/my.cnf

Находим в файле соответствующие секции и вписываем туда следующие значения:

[client]
default-character-set   = utf8

[mysqld_safe]
default-character-set   = utf8

[mysqld]
collation-server        = utf8_unicode_ci
init-connect            ='SET NAMES utf8'
character-set-server    = utf8

[mysql]
default-character-set   = utf8

Перезапускаем mysql:

sudo service mysql restart

3.3 PHP

3.3.1 установка

sudo apt-get install php5 libapache2-mod-php5 php5-mcrypt php5-curl php5-gd php5-imagick

Проверяем, что php установился:

php -v
PHP 5.5.9-1ubuntu4.3 (cli) (built: Jul  7 2014 16:36:58)
Copyright (c) 1997-2014 The PHP Group
Zend Engine v2.5.0, Copyright (c) 1998-2014 Zend Technologies
    with Zend OPcache v7.0.3, Copyright (c) 1999-2014, by Zend Technologies

3.3.2 mod_dir

Подкорректируем настройки Apache, чтобы по умолчанию открывался файл index.php, а не index.html. Для этого откроем конфигурационный файл модуля Dir веб-сервера Apache в текстовом редакторе:

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

Заменим в нем список индексных файлов, удалив ненужные:

<IfModule mod_dir.c>
	DirectoryIndex index.php index.html
</IfModule>

Сохраняем и перезапускаем Apache:

sudo service apache2 restart

3.4 PhpMyAdmin

Устанавливаем phpmyadmin. В процессе установки потребуется root'овый пароль от базы данных, а также нужно будет ввести пароль для нового пользователя БД phpmyadmin.

sudo apt-get install phpmyadmin

Открываем настройки Apache:

sudo gedit /etc/apache2/apache2.conf

Добавляем в конец строчку

Include /etc/phpmyadmin/apache.conf

Перезапускаем apache:

sudo service apache2 restart

Проверяем, что phpmyadmin работает, зайдя в браузере по адресу:

http://localhost/phpmyadmin

В качестве логина следует вводить phpmyadmin, пароль Вы задавали в процессе установки. Заходить под пользователем root не рекоммендуется.

3.5 права

В Ubuntu веб-сервер Apache работает от пользователя www-data (группа www-data). Мы добавляем Вашего пользователя в эту же группу, а также ставим на /var/www по умолчанию группу www-data. Если этого не сделать, то когда Вы будете создавать файлы в этой папке, они будут создаваться от группы и у Apache не будет к ним доступа на запись.

Подробнее про команды:

В качестве <username> нужно указать имя своего пользователя:

sudo adduser <username> www-data; sudo chgrp -R www-data /var/www; sudo chmod -R g+rw /var/www; find /var/www -type d -print0 | sudo xargs -0 chmod g+s

Теперь нужно перелогиниться, чтобы добавление пользователя в группу www-data возымело силу.

Apache все еще будет создавать файлы с правами 644 и папки 755, чтобы сделать 664 и 775 соответственно, открываем:

sudo gedit /etc/apache2/envvars

Добавляем в конец файла строчку:

umask 002

Перезапускаем Apache:

sudo service apache2 restart

4. Nodejs

Устанавливаем nodejs и менеджер пакетов npm

sudo apt-get install nodejs nodejs-legacy npm

4.1 Npm пакеты

Устанваливаем необходимые пакеты с флагом -g, глобально. После этого любой из этих пакетов мы сможем использовать в терминале, как обычную команду.

sudo npm install -g bower jshint jscs csscomb gulp npm-check-updates

5. Ruby

Устанавливаем Ruby:

sudo apt-get install ruby ruby-compass

Устанавливаем gem'ы:

sudo gem install compass sass scss-lint

6. Git

Устанавливаем git:

sudo apt-get install git

Указываем свои email и имя:

git config --global user.email "[email protected]"
git config --global user.name "Your Name"

6.1 SSH ключ

Генерируем ssh ключ, указав в комментарии свой email:

ssh-keygen -t rsa -C "[email protected]"

Сохраняем в директории по умолчанию (жмем enter):

Enter file in which to save the key (/home/<username>/.ssh/id_rsa):

Указываем passphrase для разблокировки ключа. Этот пароль нужно будет вводить один раз за сеанс работы с системой (т.е. после каждого логина).

Enter passphrase (empty for no passphrase)

Чтобы посмотреть ключ и скопировать его для добавления на Github / Gitlab / Bitbucket мы можем воспользоваться командой cat:

cat ~/.ssh/id_rsa.pub

6.2 Git clone

Проверяем, что git и ключ работают:

cd /var/www
git clone [email protected]:mrpavlikov/kelnik-foundation.git kelnik-foundation
cd kelnik-foundation
npm install && bower install && gulp build

Если npm в процессе установки начнет ругаться, что ему не хватает прав, то скорее всего в домашней директории создалась папка tmp от пользователя root. Исправляем запуском команды

sudo chown <username>:<username> ~/tmp

после чего заново запускаем

npm install && bower install && gulp build

7. Virtual host

Например, в Denwer нужно создать в определенной папке новую директорию вида example.local, и этот домен будет открываться в браузере локально. В Linux эта процедура чуть сложнее.

Чуть раньше мы склонировали в папку /var/www/kelnik-foundation репозиторий. Положим, мы хотим, чтобы этот виртуальный хост имел имя foundation.local.

Первое, что нам нужно сделать — создать конфигурацию. Впоследствии для каждого проекта (папки в /var/www/) нужно будет делать свой конфигурационный файл.

7.1 создание конфига

Зайдем в папку, в которой лежат все конфиги виртуальных хостов:

cd /etc/apache2/sites-available/

В этой папке есть шаблонный конфиг 000-default.conf, скопируем его и назовем по имени домена, по которому он будет открываться foundation.local.conf:

sudo cp 000-default.conf foundation.local.conf

Важно: у конфига всегда должно быть расширение .conf

Откроем вновь созданный файл в текстовом редакторе:

sudo gedit foundation.local.conf
  • Удалим комментарии
  • В качестве имени сервера укажем foundation.local
  • Добавим параметр ServerAlias, чтобы проект открывался также по адресу www.foundation.local
  • Укажем в качестве DocumentRoot (публичная часть) папку, в которую мы склонировали проект. Здесь следует обратить внимание на www на конце, публичная директория на уровень глубже папки проекта.
  • Добавим префикс foundation.local- к именам файлов ErrorLog и CustomLog, чтобы логи для каждого проекта велись отдельно
  • Для примера добавим переменную окружения, обозначающую, например, для Zend, что проект работает в режиме разработки, от этого параметра может зависеть вывод ошибок и т.д.

В итоге конфиг должен выглядеть примерно так:

<VirtualHost *:80>
    ServerName foundation.local
    ServerAlias www.foundation.local

    ServerAdmin webmaster@localhost
    DocumentRoot /var/www/kelnik-foundation/www

    SetEnv APPLICATION_ENV "development"

    ErrorLog ${APACHE_LOG_DIR}/foundation.local-error.log
    CustomLog ${APACHE_LOG_DIR}/foundation.local-access.log combined
</VirtualHost>

7.2 включение

Мы добавили конфигурацию нового виртуального хоста. Создали мы его в папке sites-available, что как бы намекает нам, что этот конфиг доступен, но не включен. Каждый конфиг, который мы создаем, нужно включать:

sudo a2ensite foundation.local.conf

На заметку:

  • В любой момент виртуальный хост можно выключить командой a2dissite, при этом его конфиг не сотрется.
  • Выполнить команду a2ensite и прочие команды Apache можно из любой папки. Кнопка tab совершит автодополнение в любом случае, так как система знает, где находятся конфигурационные файлы каждой такой команды.

Для вступления настроек в силу перезапускаем Apache:

sudo service apache2 restart

7.3 /etc/hosts

Последнее приготовление, нужно рассказать нашей системе, что адреса, указанные для виртуального хоста должны открываться локально. Редактируем файл /etc/hosts:

sudo gedit /etc/hosts

Добавим в конец строчки:

127.0.0.1   foundation.local
127.0.0.1   www.foundation.local

Готово! Проверяем, что все работает: http://foundation.local/example.html

8. Sublime Text 3

8.1 настройки

Открываем Sublime Text 3 и правим настройки:

Preferences -> Setings -> User

{
    "auto_find_in_selection": true,
    "default_line_ending": "unix",
    "ensure_newline_at_eof_on_save": true,
    "fallback_encoding": "Cyrillic (Windows 1251)",
    "highlight_modified_tabs": true,
    "ignored_packages":
    [
        "Vintage"
    ],
    "match_brackets_angle": true,
    "rulers":
    [
        80,
        120
    ],
    "show_encoding": true,
    "translate_tabs_to_spaces": true,
    "trim_trailing_white_space_on_save": true
}

8.2 проекты

Создаем папку под проекты

mkdir ~/Projects

Открыаем директорию Open Folder -> /var/www/kelnik-foundation и сохраняем Save Project As в папку Projects. Между проектами можно переключаться с помощью комбинации клавиш ctrl + alt + p

8.3 package manager

Устанавливаем Package Manager: открываем консоль Sublime с помощью ctrl + ~, вставляем текст и жмем enter:

import urllib.request,os,hashlib; h = '7183a2d3e96f11eeadd761d777e62404' + 'e330c659d4bb41d3bdf022e94cab3cd0'; pf = 'Package Control.sublime-package'; ipp = sublime.installed_packages_path(); urllib.request.install_opener( urllib.request.build_opener( urllib.request.ProxyHandler()) ); by = urllib.request.urlopen( 'http://sublime.wbond.net/' + pf.replace(' ', '%20')).read(); dh = hashlib.sha256(by).hexdigest(); print('Error validating download (got %s instead of %s), please try manual install' % (dh, h)) if dh != h else open(os.path.join( ipp, pf), 'wb' ).write(by)

8.4 плагины

Открываем менеджер пакетов с помощью комбинации клавиш ctrl + shift + p, ищем install package. Нам понадобятся:

8.4.1 alignment

Плагин для выравнивания строчек. По-умолчанию выравнивает по знаку =. Идем в настройки плагина и добаляем выравнивание по двоеточию:

Preferences -> Package Settings -> Alignment -> Settings -> User

{
    "alignment_chars": ["=", ":"],
    "alignment_space_chars": ["=", ":"]
}

8.4.2 javascript next

Открываем любой js файл и ставим всем javascript файлам:

View -> Syntax -> Open all with current extension as -> JavaScriptNext - ES6 Syntax -> JavaScript Next

8.4.3 SublimeLinter

Выбираем режим работы линтера:

Tools -> SublimeLinter -> Lint Mode -> Background / Save

9. Photoshop

Как ни крутись, пока что без Photoshop'а пока не получается. На Ubuntu 14.04 установились следующие версии:

  • Photoshop CS5 (копия с Windows с лицензией)
  • Photoshop CS6 (trial)
  • Photoshop CC (trial)

Так или иначе, для любой из данных версий сначала придется выполнить одни и те же манипуляции.

9.1 Wine

Устанавливаем последнюю на данный момент ветку 1.7:

sudo add-apt-repository ppa:ubuntu-wine/ppa
sudo apt-get update
sudo apt-get install wine1.7 winetricks

Удаляем префикс:

rm -rf ~/.wine

Создаем новый 32битный:

WINEARCH=win32 WINEPREFIX=~/.wine winecfg

Выбираем windows 7, жмем ok.

9.2 Winetricks

Для установки-работы Photoshop понадобится установить следующие библиотеки:

winetricks gdiplus atmlib ie6 msxml3 msxml6 vcrun2005sp1 vcrun2008 fontsmooth-rgb

Некоторые пакеты, например ie6 и msxml3 приостановят инсталляцию и попросят скачать определенный файл самостоятельно, после чего положить его в конкретную папку. Браузер перейдет на url, а файловый менеджер откроет нужную папку автоматически. Если же этого не случилось, то можно всю информацию посмотреть в сообщении консоли. После того как нужный файл окажется в новой папке, перезапускаем команду (нажать стрелку вверх в консоли, enter).

9.2.1 Photoshop: установка

В зависимости от типа установки (перенос лицензии с Windows или новой) варианты дальнейших дествий могут разниться. Можно запустить .exe инсталятор двойным кликом, как обычный файл, можно перенести ключ из реестра Windows на Ubuntu вместе с самими файлами и точно так же запустить.

Сылки по теме:

10. Sources

Clone this wiki locally