前臺編程及運行環境搭建npm+webpack+nginx

前臺編程及運行環境搭建

現有條件： 系統Linux，版本：14.04.1-Ubuntu

前臺編程及運行環境描述： 使用nginx服務器運行前臺代碼，使用npm+webpack對前臺代碼進行管理及編譯。

1. 安裝Nodejs

目的：安裝之後就可以用其自帶的npm進行工具引用管理。

安裝原理：下載官網編譯好的文件：node-v6.10.0-linux-x64.tar.xz， 對其進行解壓，因爲是二進制文件，因此可以直接用命令使用，但是需要設置全局變量。

安裝步驟：

step 0. 下載文件

進入官網： https://nodejs.org/en/download/ 選擇Linux Binaries (x86/x64)的64位版本進行下載；

將下載文件拷貝至/opt文件夾下

step 1. 解壓tar.xz文件

sudo xz -d node-v6.10.0-linux-x64.tar.xz

sudo tar -xvf node-v6.10.0-linux-x64.tar

step 2. 配置全局變量（實際上是把鏈接放在/usr的文件夾下）

ln -s /opt/node-v6.10.0-linux-x64/bin/node /usr/local/bin/node

ln -s /opt/node-v6.10.0-linux-x64/bin/npm /usr/local/bin/npm

step 3. 測試

可以直接在命令行輸入node -v，打印出版本即說明安裝成功

step 4. 修改文件夾權限

如果不修改文件夾權限的話，後面全局安裝的過程會出現權限問題。

sudo chmod -R 777 /opt/node-v6.10.0-linux-x64

2. 安裝webpack

目的： 使用webpack對項目進行打包管理，及時編譯前臺。

安裝原理： 直接使用npm進行全局安裝，並設置全局變量。

安裝步驟：

step 1. 下載安裝全局webpcak

npm install webpack -g

step 2. 配置全局變量

如果不配置的話，會出現“command not found: webpack”的問題（困擾我好幾天……）

ln -s /opt/node-v6.10.0-linux-x64/bin/webpcak /usr/local/bin/webpcak




安裝成功nodejs以及webpack之後，就可以對項目進行編輯查看了。

3. 安裝ngnix服務器

目的：因爲需要cookie等功能，因此需使用服務器來運行前臺代碼，

安裝原理：下載安裝，並且修改配置文件。

安裝步驟：

step 1: 下載安裝

sudo apt-get update
sudo apt-get install nginx

step 2: 配置參數

配置：在http裏面添加：

server {

listen 8000;

server_name localhost;

location / {

        root /home/hadoop/Projects/code-clone-frontend;

        index index.html;

}

}

其中：/home/hadoop/Projects/code-clone-frontend爲項目的工作目錄，8000爲端口號。

參考：

http://www.cnblogs.com/8765h/p/4777746.html

http://www.cnblogs.com/xd502djj/p/4686534.html