服务器部署前端环境node和nginx

分享主目录

• 服务器安装node环境（前端必备，提供俩种详细的安装方式）
• 服务器安装nginx启动web服务（包括配置自己所需路径）
• 服务器nginx配置反向代理

服务器登录软件

• FinalShell
• 下载链接 www.hostbuf.com/downloads/f…
• 方便：可以快捷的进入服务器的文件进行编辑，如下截图中，当你需要修改某个文件时可以双击下面的文件进行编辑

​

服务器安装node环境

• 方式一：服务器在可以连外网的条件下从node官网下载源码，一般自己买的是可以的，可能公司会有限制（make编译阶段会比较耗时）

1. wget -c https://nodejs.org/dist/v8.9.1/node-v8.9.1.tar.gz 这里我直接下载到了根目录

​

2. tar -zxvf node-v8.9.1.tar.gz 下载结束后提取tar文件，这是你会从根目录看到

​

3. cd node-v8.9.1 进入文件夹后执行sudo yum install gcc gcc-c++

​

4. ./configure 对源码进行配置

​

5. make 编译 编译完成后 sudo make install安装

这里我真的等了很久，午休期间一直还在编译阶段，所以推荐第二种方式

6. node -v检验是否成功安装 如果出现版本号即表示成功

​

• 方式二：直接安装编译好的Node.js，和第一种方式的差别就是下载的安装包不同以及编译时间不同

1. wget -c https://nodejs.org/dist/v8.9.1/node-v8.9.1-linux-x64.tar.xz 下载官网的node二进制文件

在这里我在根目录下新建了一个文件夹名为node，命令为mkdir node

打开node文件夹执行上面的wget命令下载

​

2. tar -xvf node-v8.9.1-linux-x64.tar.xz 提取文件，提取成功之后你会发现文件夹内多了解压后的文件夹

​

3. 为了后面执行方便 我这里想要将这个文件夹的名字换掉

​

4.这时当你尝试验证是否安装成功的时候，发现node命令并不能使用，因为你还需要建立软连接，将node命令和npm命令通过软连接变为全局，通过下面的截图你可以发现，没有进行连接的时候执行node -v是无效的，但是通过建立软连接之后，全局均可以验证成功

这里要注意 -s 后面是自己配的路径

ln -s /node/nodeJs/bin/npm /usr/local/bin/ 
ln -s /node/nodeJs/bin/node /usr/local/bin/ 

截图包括俩个软连接命令

​

• 拓展：为什么需要软连接

在了解软连接之前我们需要明确软连接命令的含义，ln -s 源文件 目标文件 看到这里也许你会明白就是就是一个文件指向，那么你需要联想，当你的电脑在安装一个软件之后，你是不是会经常需要配置环境变量给它，这样你的cmd命令才能识别到，所以这里的原理在我看来是类似的，node的二进制文件在当前的目录下进行安装之后是没有和整台服务器进行连接，需要在/usr/local/bin/目录下配置才能作为整个服务器的环境，这个目录对于整个服务器来说肯定是具体特殊功能的一个文件夹，之后有了解继续更博，或者有不对的地方希望能够指出一起学习。

服务器安装nginx启动web服务

• 首先安装pcre和openssl依赖 yum -y install pcre* yum -y install openssl*
• wget http://nginx.org/download/nginx-1.15.8.tar.gz 如果你的服务器可以连接外网，那么你就这样操作，发现自己的服务器connect失败就采取下面这种方式，这里我也直接在根目录下进行了

​

• （不能连外网的情况）首先本地下载nodejs.org/en/download…中需要的版本 nginx-1.15.8.tar.gz，然后执行rz命令选择已经下载好的文件

​

• 无论是上面哪种方式，成功之后会发现根目录多了一个文件夹nginx-1.15.8.tar.gz,解压之后会发现多了nginx-1.15.8这个文件夹

​

• cd nginx-1.15.8 进入nginx的文件夹后执行配置文件且安装依赖

​

• make -j4 编译
• make install 安装依赖
• ln -s /usr/local/nginx nginx-1.15.8 进行软连接 如果local文件夹下面没有nginx文件夹就自己创建一个
• 安装成功之后就可以尝试启动了

进入nginx/conf文件夹下检查nginx.conf是否正确

cd /usr/local/nginx/conf

nginx -t (检查是否正确）

nginx 启动nginx

​

• 如果上面的步骤全部完成即可在浏览器访问自己的ip就会看到这个界面

​

• 如果这时候你想放一个静态文件尝试访问，那么你可以这样

1. cd /usr/local 进入这个目录下新建vue文件，我的目的是将静态文件存放到这里，可以自由命名

​

2. mkdir vue

​

3. cd vue 进入成功之后执行rz，这里我是讲本地vue项目打好的dist包传了上去

​

4.上传成功截图

​

5. cd /usr/local/nginx/conf 进入这个目录配置location，给某个ip:端口地址配置静态页面的路径

​

6. 打开之后可以看到类似于我的配置，这里放一下我目前的配置

#user  nobody;
worker_processes  1;

#error_log  logs/error.log;
#error_log  logs/error.log  notice;
#error_log  logs/error.log  info;

#pid        logs/nginx.pid;


events {
    worker_connections  1024;
}


http {
    include       mime.types;
    default_type  application/octet-stream;

    #log_format  main  '$remote_addr - $remote_user [$time_local] "$request" '
    #                  '$status $body_bytes_sent "$http_referer" '
    #                  '"$http_user_agent" "$http_x_forwarded_for"';

    #access_log  logs/access.log  main;

    sendfile        on;
    #tcp_nopush     on;

    #keepalive_timeout  0;
    keepalive_timeout  65;

    #gzip  on;

    server {
        listen       80;
        server_name  localhost;

        #charset koi8-r;

        #access_log  logs/host.access.log  main;

        location / {
            root   /usr/local/vue/dist;
            index  index.html index.htm;
        }
	location ~ .*\.(gif|jpg|jpeg|png)$ {  
            expires 24h;  
            root /images/;#指定图片存放路径  
            access_log /home/nginx/logs/images.log;#图片 日志路径  
            proxy_store on;  
            proxy_store_access user:rw group:rw all:rw;  
            proxy_temp_path         /home/images/;#代理临时路径
            proxy_redirect          off;  

            proxy_set_header        Host 127.0.0.1;  
            proxy_set_header        X-Real-IP $remote_addr;  
            proxy_set_header        X-Forwarded-For $proxy_add_x_forwarded_for;  
            client_max_body_size    10m;  
            client_body_buffer_size 1280k;  
            proxy_connect_timeout   900;  
            proxy_send_timeout      900;  
            proxy_read_timeout      900;  
            proxy_buffer_size       40k;  
            proxy_buffers           40 320k;  
            proxy_busy_buffers_size 640k;  
            proxy_temp_file_write_size 640k;  
            if ( !-e $request_filename)  
            {  
                 proxy_pass  http://127.0.0.1:8088;#代理访问地址  
            }  
	}
        location /api {
	   proxy_pass http://120.79.17.239:6100;
        }

        #error_page  404              /404.html;

        # redirect server error pages to the static page /50x.html
        #
        error_page   500 502 503 504  /50x.html;
        location = /50x.html {
            root   html;
        }

        # proxy the PHP scripts to Apache listening on 127.0.0.1:80
        #
        #location ~ \.php$ {
        #    proxy_pass   http://127.0.0.1;
        #}

        # pass the PHP scripts to FastCGI server listening on 127.0.0.1:9000
        #
        #location ~ \.php$ {
        #    root           html;
        #    fastcgi_pass   127.0.0.1:9000;
        #    fastcgi_index  index.php;
        #    fastcgi_param  SCRIPT_FILENAME  /scripts$fastcgi_script_name;
        #    include        fastcgi_params;
        #}

        # deny access to .htaccess files, if Apache's document root
        # concurs with nginx's one
        #
        #location ~ /\.ht {
        #    deny  all;
        #}
    }


    # another virtual host using mix of IP-, name-, and port-based configuration
    #
    #server {
    #    listen       8000;
    #    listen       somename:8080;
    #    server_name  somename  alias  another.alias;

    #    location / {
    #        root   html;
    #        index  index.html index.htm;
    #    }
    #}


    # HTTPS server
    #
    #server {
    #    listen       443 ssl;
    #    server_name  localhost;

    #    ssl_certificate      cert.pem;
    #    ssl_certificate_key  cert.key;

    #    ssl_session_cache    shared:SSL:1m;
    #    ssl_session_timeout  5m;

    #    ssl_ciphers  HIGH:!aNULL:!MD5;
    #    ssl_prefer_server_ciphers  on;

    #    location / {
    #        root   html;
    #        index  index.html index.htm;
    #    }
    #}
}

7. 接下来无论你的配置和我的配置有多大的区别都只需要改动location这部分，像截图所示，端口改为80，location文件下的root改为/usr/local/vue/dist(如果你配置的和我不一样就改为自己的）

​

8. 访问 比如说我的链接就是http://120.79.17.239/ 这是我自己写的一个vue

服务器nginx配置反向代理

• 很多时候我们会面临一个问题就是跨域，这里介绍一个我已经配置成功的一个反向代理，如下图所示，我的vue项目访问的接口都是以/api开头的，且前后端虽是同一个ip但不是同一个端口，所以这里设置了反向代理，这是最简单的，目前正在学习其它的写法，学习之后分享给大家

​