vue-cli 项目部署到云服务器

作者: Circletan7 | 来源:发表于2019-08-03 02:16 被阅读0次

准备环境或工具
Nodejs：启动项目需要的环境
pm2：启动项目为守护进程
Nginx：映射到相应的域名
ps：我的Linux系统为Ubuntu16.04，安装Nginx可能会与其他版本的Linux有点差别

一. Linux系统安装Nodejs

通过 uname -a 命令查看到我的Linux系统位数是64位（备注：x86_64表示64位系统， i686 i386表示32位系统）

root@genuine-spin-3:~# uname -a
Linux genuine-spin-3.localdomain 4.10.0-22-generic #24~16.04.1-Ubuntu SMP Tue May 23 17:03:51 UTC 2017 x86_64 x86_64 x86_64 GNU/Linux

去下面官网找到和自己系统匹配的文件，按F12拿到文件下载地址：
英文网址：https://nodejs.org/en/download/
中文网址：http://nodejs.cn/download/

对应版本的nodejs下载地址.png
用 wget 命令把Nodejs文件下载下来，放置路径为 /usr/local/，然后解压Nodejs文件(为了方便，我还将文件改名为nodejs，这步可省略)

root@genuine-spin-3:~# cd /usr/local/
root@genuine-spin-3:/usr/local# wget https://nodejs.org/dist/v10.16.1/node-v10.16.1-linux-x64.tar.xz
root@genuine-spin-3:/usr/local# tar -xvf  node-v10.16.1-linux-x64.tar.xz
root@genuine-spin-3:/usr/local# mv node-v6.10.0-linux-x64 nodejs

5.确认一下nodejs下bin目录是否有node 和npm文件，（执行 ./node -v 也能确定nodejs是否安装成功），如果有，执行软连接，变为全局，如果没有重新下载

root@genuine-spin-3:~# cd /usr/local/nodejs/bin
root@genuine-spin-3:/usr/local/nodejs/bin# ls
node  npm  npx
root@genuine-spin-3:/usr/local/nodejs/bin# ./node -v
v10.16.1
root@genuine-spin-3:/usr/local/nodejs/bin# ln -s /usr/local/nodejs/bin/node /usr/local/bin/
root@genuine-spin-3:/usr/local/nodejs/bin# ln -s /usr/local/nodejs/bin/npm /usr/local/bin/

node -v检验nodejs是否已变为全局

root@genuine-spin-3:/usr/local/nodejs/bin# node -v
v10.16.1

二. Linux系统安装pm2

启动项目为守护进程，我选择了强大的 pm2，具体原因可以参考大佬的网页：http://www.ruanyifeng.com/blog/2016/02/linux-daemon.html

安装pm2
npm install pm2 -g
执行下面软连接，全局安装pm2
ln -s /rusr/local/nodejs/pm2 /usr/local/bin/
（ps：安装pm2时打印的log可以看到pm2安装的位置）
执行 pm2 start server.js --watch 启动项目

pm2的一些常用命令：

pm2 start server.js    // 启动 server.js应用程序
pm2 start server.js --name sell    // 启动 server.js应用程序并命名为 sell
pm2 start server.js  --watch    // 当文件变化时自动重启应用
pm2 restart all    // 重启所有应用

pm2 stop server.js    // 停止 server.js的应用程序
pm2 stop sell    // 停止 naem为 sell 的应用程序
pm2 stop 0    // 停止 id为 0 的应用程序
pm2 stop all    // 停止所有的应用程序

pm2 delete 0    // 删除指定应用 id为 0
pm2 delete all    // 关闭并删除所有应用

pm2 list    // pm2启动的所有的应用程序列表

三. Ubuntu16.04 安装Nginx

在Ubuntu下安装Nginx有以下两种方法，但是如果想要安装最新版本的就必须下载源码包编译安装。
$\color{#ea4335}{㈠基于APT源安装}$

apt-get install nginx

安装好的文件位置：
/usr/sbin/nginx：主程序
/etc/nginx：存放配置文件
/usr/share/nginx：存放静态文件
/var/log/nginx：存放日志

其实从上面的根目录文件夹可以知道，Linux系统的配置文件一般放在/etc，日志一般放在/var/log，运行的程序一般放在/usr/sbin或者/usr/bin。
当然，如果要更清楚Nginx的配置项放在什么地方，可以打开/etc/nginx/nginx.conf
如果要查看加载的是哪个配置文件，可以用这个命令nginx -t或者ps -ef | grep nginx

通过这种方式安装的，会自动创建服务，会自动在/etc/init.d/nginx新建服务脚本，然后就可以使用service nginx {start|stop|restart|reload|force-reload|status|configtest|rotate|upgrade}的命令启动。

还有一个好处，创建好的文件由于放在/usr/sbin目录下，所以能直接在终端中使用nginx命令而无需指定路径。

$\color{#ea4335}{㈡通过源码包编译安装}$

写在安装前：
这种方式可以自定安装指定的模块以及最新的版本。方式更灵活。
官方下载页面：http://nginx.org/en/download.html
configure配置文件详解：http://nginx.org/en/docs/configure.html

1. 首先安装缺少的依赖包

安装gcc g++的依赖库

apt-get install build-essential
apt-get install libtool

安装pcre依赖库（http://www.pcre.org/）

apt-get update
apt-get install libpcre3 libpcre3-dev

安装zlib依赖库（http://www.zlib.net）

apt-get install zlib1g-dev

安装SSL依赖库（16.04默认已经安装了）

apt-get install openssl

2. 安装Nginx

#下载最新版本：
wget http://nginx.org/download/nginx-1.13.6.tar.gz
#解压：
tar -zxvf nginx-1.13.6.tar.gz
#进入解压目录：
cd nginx-1.13.6
#配置：
./configure --prefix=/usr/local/nginx 
#编译：
make
#安装：
make install
#启动：
/usr/local/nginx/sbin/nginx -c /usr/local/nginx/conf/nginx.conf
注意：-c 指定配置文件的路径，不加的话，nginx会自动加载默认路径的配置文件，可以通过-h查看帮助命令。
#查看进程：
ps -ef | grep nginx

3. 配置软链接

ln -s /usr/local/nginx/sbin/nginx /usr/bin/nginx

现在就可以不用路径直接输入nginx启动。

4. 配置开机启动服务
在/etc/init.d/下创建nginx文件，sudo vim /etc/init.d/nginx，内容如下：

#!/bin/sh

### BEGIN INIT INFO
# Provides:      nginx
# Required-Start:    $local_fs $remote_fs $network $syslog $named
# Required-Stop:     $local_fs $remote_fs $network $syslog $named
# Default-Start:     2 3 4 5
# Default-Stop:      0 1 6
# Short-Description: starts the nginx web server
# Description:       starts nginx using start-stop-daemon
### END INIT INFO

PATH=/usr/local/sbin:/usr/local/bin:/sbin:/bin:/usr/sbin:/usr/bin
DAEMON=/usr/local/nginx/sbin/nginx
NAME=nginx
DESC=nginx

# Include nginx defaults if available
if [ -r /etc/default/nginx ]; then
    . /etc/default/nginx
fi

STOP_SCHEDULE="${STOP_SCHEDULE:-QUIT/5/TERM/5/KILL/5}"

test -x $DAEMON || exit 0

. /lib/init/vars.sh
. /lib/lsb/init-functions

# Try to extract nginx pidfile
PID=$(cat /usr/local/nginx/conf/nginx.conf | grep -Ev '^\s*#' | awk 'BEGIN { RS="[;{}]" } { if ($1 == "pid") print $2 }' | head -n1)
if [ -z "$PID" ]; then
    PID=/run/nginx.pid
fi

if [ -n "$ULIMIT" ]; then
    # Set ulimit if it is set in /etc/default/nginx
    ulimit $ULIMIT
fi

start_nginx() {
    # Start the daemon/service
    #
    # Returns:
    #   0 if daemon has been started
    #   1 if daemon was already running
    #   2 if daemon could not be started
    start-stop-daemon --start --quiet --pidfile $PID --exec $DAEMON --test > /dev/null \
        || return 1
    start-stop-daemon --start --quiet --pidfile $PID --exec $DAEMON -- \
        $DAEMON_OPTS 2>/dev/null \
        || return 2
}

test_config() {
    # Test the nginx configuration
    $DAEMON -t $DAEMON_OPTS >/dev/null 2>&1
}

stop_nginx() {
    # Stops the daemon/service
    #
    # Return
    #   0 if daemon has been stopped
    #   1 if daemon was already stopped
    #   2 if daemon could not be stopped
    #   other if a failure occurred
    start-stop-daemon --stop --quiet --retry=$STOP_SCHEDULE --pidfile $PID --name $NAME
    RETVAL="$?"
    sleep 1
    return "$RETVAL"
}

reload_nginx() {
    # Function that sends a SIGHUP to the daemon/service
    start-stop-daemon --stop --signal HUP --quiet --pidfile $PID --name $NAME
    return 0
}

rotate_logs() {
    # Rotate log files
    start-stop-daemon --stop --signal USR1 --quiet --pidfile $PID --name $NAME
    return 0
}

upgrade_nginx() {
    # Online upgrade nginx executable
    # http://nginx.org/en/docs/control.html
    #
    # Return
    #   0 if nginx has been successfully upgraded
    #   1 if nginx is not running
    #   2 if the pid files were not created on time
    #   3 if the old master could not be killed
    if start-stop-daemon --stop --signal USR2 --quiet --pidfile $PID --name $NAME; then
        # Wait for both old and new master to write their pid file
        while [ ! -s "${PID}.oldbin" ] || [ ! -s "${PID}" ]; do
            cnt=`expr $cnt + 1`
            if [ $cnt -gt 10 ]; then
                return 2
            fi
            sleep 1
        done
        # Everything is ready, gracefully stop the old master
        if start-stop-daemon --stop --signal QUIT --quiet --pidfile "${PID}.oldbin" --name $NAME; then
            return 0
        else
            return 3
        fi
    else
        return 1
    fi
}

case "$1" in
    start)
        log_daemon_msg "Starting $DESC" "$NAME"
        start_nginx
        case "$?" in
            0|1) log_end_msg 0 ;;
            2)   log_end_msg 1 ;;
        esac
        ;;
    stop)
        log_daemon_msg "Stopping $DESC" "$NAME"
        stop_nginx
        case "$?" in
            0|1) log_end_msg 0 ;;
            2)   log_end_msg 1 ;;
        esac
        ;;
    restart)
        log_daemon_msg "Restarting $DESC" "$NAME"

        # Check configuration before stopping nginx
        if ! test_config; then
            log_end_msg 1 # Configuration error
            exit $?
        fi

        stop_nginx
        case "$?" in
            0|1)
                start_nginx
                case "$?" in
                    0) log_end_msg 0 ;;
                    1) log_end_msg 1 ;; # Old process is still running
                    *) log_end_msg 1 ;; # Failed to start
                esac
                ;;
            *)
                # Failed to stop
                log_end_msg 1
                ;;
        esac
        ;;
    reload|force-reload)
        log_daemon_msg "Reloading $DESC configuration" "$NAME"

        # Check configuration before stopping nginx
        #
        # This is not entirely correct since the on-disk nginx binary
        # may differ from the in-memory one, but that's not common.
        # We prefer to check the configuration and return an error
        # to the administrator.
        if ! test_config; then
            log_end_msg 1 # Configuration error
            exit $?
        fi

        reload_nginx
        log_end_msg $?
        ;;
    configtest|testconfig)
        log_daemon_msg "Testing $DESC configuration"
        test_config
        log_end_msg $?
        ;;
    status)
        status_of_proc -p $PID "$DAEMON" "$NAME" && exit 0 || exit $?
        ;;
    upgrade)
        log_daemon_msg "Upgrading binary" "$NAME"
        upgrade_nginx
        log_end_msg $?
        ;;
    rotate)
        log_daemon_msg "Re-opening $DESC log files" "$NAME"
        rotate_logs
        log_end_msg $?
        ;;
    *)
        echo "Usage: $NAME {start|stop|restart|reload|force-reload|status|configtest|rotate|upgrade}" >&2
        exit 3
        ;;
esac

设置服务脚本有执行权限
chmod +x /etc/init.d/nginx
注册服务
cd /etc/init.d/
update-rc.d nginx defaults

现在基本上就可以开机启动了，常用的命令如下：
service nginx {start|stop|restart|reload|force-reload|status|configtest|rotate|upgrade}

四. Nginx的配置

了解nginx.conf 配置结构

... #全局块
events { #events块
...
}

http #http块
{
    ... #http全局块

    server #server块
    { 
        ... #server全局块
        location [PATTERN] #location块
        {
            ...
        }
        location [PATTERN] 
        {
            ...
        }
     }

    server
    {
        ...
    }

    ... #http全局块
}

1、main全局块：配置影响nginx全局的指令。一般有运行nginx服务器的用户组，nginx进程pid存放路径，日志存放路径，配置文件引入，允许生成worker process数等。
2、events块：配置影响nginx服务器或与用户的网络连接。有每个进程的最大连接数，选取哪种事件驱动模型处理连接请求，是否允许同时接受多个网路连接，开启多个网络连接序列化等。
3、http块：可以嵌套多个server，配置代理，缓存，日志定义等绝大多数功能和第三方模块的配置。如文件引入，mime-type定义，日志自定义，是否使用sendfile传输文件，连接超时时间，单连接请求数等。
4、server块：配置虚拟主机的相关参数，一个http中可以有多个server。
5、location块：配置请求的路由，以及各种页面的处理情况。

不同模块指令关系：server继承main；location继承server；upstream既不会继承指令也不会被继承，它有自己的特殊指令，不需要在其他地方的应用

nginx.conf 配置文件如下：

#配置用户或者组，默认为nobody nobody。
#user  nobody;
#允许生成的进程数，默认为1
worker_processes  1;

#制定错误日志路径，级别。这个设置可以放入全局块，http块，server块，级别依次为：debug|info|notice|warn|error|crit|alert|emerg
#error_log  logs/error.log;
#error_log  logs/error.log  notice;
#error_log  logs/error.log  info;

#指定nginx进程运行文件存放地址
#pid        logs/nginx.pid;


#工作模式及连接数上限
events {
    #单个work进程允许的最大连接数，默认为512
    worker_connections  1024;
}


#http服务器
http {
    #文件扩展名与文件类型映射表。设定mime类型(邮件支持类型),类型由mime.types文件定义
    #include /usr/local/nginx/conf/mime.types;
    include       mime.types;
    #默认文件类型，默认为text/plain
    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"';

    #设置访问日志路径和格式。"log/"该路径为nginx日志的相对路径，mac下是/usr/local/var/log/。combined为日志格式的默认值
    #access_log  logs/access.log  main;

    #允许sendfile方式传输文件，默认为off，可以在http块，server块，location块。（sendfile系统调用不需要将数据拷贝或者映射到应用程序地址空间中去）
    sendfile        on;
    #tcp_nopush     on;

    #连接超时时间，默认为75s，可以在http，server，location块。
    #keepalive_timeout  0;
    keepalive_timeout  65;

    #gzip压缩开关
    #gzip  on;

#HTTP服务器

# 静态资源一般放在nginx所在主机
    server {
        listen       80;  #监听HTTP端口
        server_name  guirong.name;  #监听基于域名的虚拟主机。可有多个，可以使用正则表达式和通配符

        #charset koi8-r;

        #access_log  logs/host.access.log  main;

        location / {
            rewrite ^/ http://www.guirong.name;
        }

        location /sell/ {  #反向代理的路径（和upstream绑定），location后面设置映射的路径
            proxy_set_header X-Real-IP $remote_addr;
            proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
            proxy_set_header  Host $http_host;
            proxy_set_header X-Nginx-Proxy true;
            proxy_pass http://127.0.0.1:8090/;
        }

# 指定某些路径使用https访问(使用正则表达式匹配路径+重写uri路径)
       location ~* /http* { #路径匹配规则：如localhost/http、localhost/httpsss等等
#rewrite只能对域名后边的除去传递的参数外的字符串起作用，例如www.c.com/proxy/html/api/msg?method=1&para=2只能对/proxy/html/api/msg重写。
#rewrite 规则 定向路径 重写类型;
#rewrite后面的参数是一个简单的正则。$1代表正则中的第一个()。
#$host是nginx内置全局变量，代表请求的主机名
#重写规则permanent表示返回301永久重定向
           rewrite ^/(.*)$ https://$host/$1 permanent;
       }


        #错误处理页面（可选择性配置）
        #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;
        #}
    }

#以下是一些反向代理的配置(可选择性配置)
#proxy_redirect off;
#proxy_set_header Host $host; #proxy_set_header用于设置发送到后端服务器的request的请求头
#proxy_set_header X-Real-IP $remote_addr;
#proxy_set_header X-Forwarded-For $remote_addr; #后端的Web服务器可以通过X-Forwarded-For获取用户真实IP
#proxy_connect_timeout 90; #nginx跟后端服务器连接超时时间(代理连接超时)
#proxy_send_timeout 90; #后端服务器数据回传时间(代理发送超时)
#proxy_read_timeout 90; #连接成功后，后端服务器响应时间(代理接收超时)
#proxy_buffer_size 4k; #设置代理服务器（nginx）保存用户头信息的缓冲区大小
#proxy_buffers 4 32k; #proxy_buffers缓冲区，网页平均在32k以下的话，这样设置
#proxy_busy_buffers_size 64k; #高负荷下缓冲大小（proxy_buffers*2）
#proxy_temp_file_write_size 64k; #设定缓存文件夹大小，大于这个值，将从upstream服务器传

#client_max_body_size 10m; #允许客户端请求的最大单文件字节数
#client_body_buffer_size 128k; #缓冲区代理缓冲用户端请求的最大字节数


    # 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
#(1)HTTPS的固定端口号是443，不同于HTTP的80端口；
#(2)SSL标准需要引入安全证书，所以在 nginx.conf 中你需要指定证书和它对应的 key
    # HTTPS server
    #
    server {
        listen       443 ssl;
        server_name  localhost;

        ssl_certificate      cert.pem;  #ssl证书文件位置(常见证书文件格式为：crt/pem)
        ssl_certificate_key  cert.key;  #ssl证书key位置

#ssl配置参数（选择性配置）
        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;
        }
    }
    
#可以把子配置文件放到/usr/local/etc/nginx/servers/路径下，通过include引入
   #include /usr/local/etc/nginx/servers/*.conf;
}

按照上面配置完nginx.conf 文件之后就可以通过域名访问项目啦，例如：我把项目丢到/sell/下，可以通过http://www.guirong.name/sell/访问到我的项目

vue-cli 项目部署到云服务器

一. Linux系统安装Nodejs

二. Linux系统安装pm2

三. Ubuntu16.04 安装Nginx

四. Nginx的配置

相关文章

网友评论

延伸阅读

深度阅读

栏目导航

热点阅读