【使用記錄2】阿裡伺服器運作vue項目

記錄我首次在伺服器上部署vue項目

1安裝node

使用NVM安裝。。

完成以下操作，使用NVM安裝Node.js版本：

1. 使用git将源碼克隆到本地的~/.nvm目錄下，并檢查最新版本。

   yum install git
   git clone https://github.com/cnpm/nvm.git ~/.nvm && cd ~/.nvm && git checkout `git describe --abbrev=0 --tags`
              

2. 激活NVM。

   echo ". ~/.nvm/nvm.sh" >> /etc/profile
   source /etc/profile
              

3. 列出Node.js的所有版本。

   nvm list-remote
              

4. 安裝多個Node.js版本。

   nvm install v16.6.1
              

5. 運作

   nvm ls

   檢視已安裝的Node.js版本。

   本示例使用的版本為v7.4.0。傳回結果如下所示。

   [[email protected] .nvm]# nvm ls
   ->       v16.6.1
              

6. 運作

   nvm use <版本号>

   可以切換Node.js版本。

   例如，切換Node.js版本至v7.4.0。傳回結果如下所示。

   [[email protected] .nvm]# nvm use v16.6.1
   Now using node v16.6.1
              

1. 下載下傳Node.js安裝包。

   wget https://nodejs.org/dist/v16.6.1/node-v16.6.1-linux-x64.tar.xz
              

2. 解壓檔案。

   tar xvf node-v16.6.1-linux-x64.tar.xz
              

3. 建立軟連結，您就可以在任意目錄下直接使用node和npm指令。

   ln -s /root/node-v16.6.1-linux-x64/bin/node /usr/local/bin/node
   ln -s /root/node-v16.6.1-linux-x64/bin/npm /usr/local/bin/npm
              

4. 檢視node、npm版本。

   node -v
   npm -v
              

 16.6.1版本号，這個是變化的，如果需要最新版本請去官網檢視最新的版本号

 二、拉取vue代碼

git clone http://代碼位址

npm install

如果報錯安裝cnpm

npm install -g cnpm --registry=https://registry.cpm.taobao.org

在使用cnpm install

有時是會遇到安裝node-sass錯誤

這個時候單獨安裝一下node-sass

cnpm install node-sass

 三、安裝niginx

進入伺服器目錄 cd /usr/local/

1、安裝nginx相關的依賴：gcc、pcre-devel、zlib-devel、openssl-devel。指令如下：

　　yum -y install gcc pcre-devel zlib-devel openssl openssl-devel

2、下載下傳：

        wget https://nginx.org/download/nginx-1.9.9.tar.gz

3、解壓：

        tar -zxvf nginx-1.9.9.tar.gz 

4、重命名檔案夾為nginx：

        mv nginx-1.9.9 nginx

5、進入目錄：

        cd nginx/

6、建立log檔案

        mkdir logs

7、設定權限

        chmod 700 logs

8、安裝配置

        ./configure --prefix=/usr/local/nginx

        make

        make install

9、測試是否安裝成功

        ./sbin/nginx -t

 10、其它指令

重新開機nginx：在nginx目錄下輸入： ./sbin/nginx -s reload

複制一個檔案夾到指定檔案夾中： cp -r /home/vue3-music-app/dist/ /usr/local/nginx/html/

四、設定nginx

1、首先前端需要axosbaseURL設定成：http://99.*.*.*/music-next/

2、nginx的前端代碼配置

在config檔案在修改

location /music/ {

    alias  /home/vue3-music-app/dist/;

}

3、node啟動的接口代理（這裡要和1當中的/music-next/一樣）

location /music-next/ {

    proxy_pass http://127.0.0.1:9002/;

}

4、設定成功後，浏覽器通路的url是：http://99.*.*.*/music/#/

5、浏覽器中接口通路的是：http://99.*.*.*/music-next/api/***

其它補充總結

1、每次進入伺服器都需要重新設定node版本（不然npm和node就是未找到指令）： nvm use v16.6.1

2、這樣設定就不需要每次重新use了，指令如下： nvm alias default 16.6.1

3、又發現一個問題關掉伺服器連結視窗node服務就停止了，如何讓node.js程式一直在背景運作呢？

  1）安裝forever: sudo npm install -g forever

  2）使用forever開啟nodejs程式: forever start xxx.js

  如果用npm start來運作程式，則用指令: forever start -c "npm start" 路徑。

  3）檔案改動監聽并自動重新開機： forever start -w XXX.js

  4） 停止所有運作的：node App forever stopall

  5） 停止其中一個：node App forever stop app.js

  6）删除node_modules檔案夾： 進入vue項目的根目錄輸入 rm -fr node_modules