前端部署个人小记

技术

发布日期: 2020-10-12

文章字数: 1.9k

阅读时长: 8 分

阅读次数:

声明：前端部署网上搜索有不少的文章，但是这里列举的是我自己目前用的一些手段，绝对是亲身实践过的(服务器到期，地址目前不可用)
现在博客和某些项目被我部署到github pages，用travis进行CI/CD，对个人开发者来说更加友好

前言

这里的部署主要分两块：前端和后端；前端指的是我们打出来的dist包，后端指的是一些后端服务，既然这里说的是前端部署，那必须得是node服务了，这个服务部署好之后我们就可以访问它的api了；这样，一个前后端分离的项目就成功部署好了，这里我依据的是我自己部署好的项目：网易云音乐，下面我详细说明

部署前的准备

那肯定是需要一台服务器，域名的话，有需求就买一个吧，暂时不需要的话像我一样用ip地址访问其实问题也不大，就是丑一点😂
我这里用到的服务器是腾讯云购买的centOS云服务器，然后用的是学生体验套餐，10元/月，我续了一年，目前也够用了；

选择服务器时需要注意：一个是操作系统，一个是选择地区；操作系统建议linux，也就是这里选择unbuntu或者centOS，我用的是centOS，地区的话选择离自己最近的地区，速度相应的也会快些

买好之后，腾讯云会发送一封站内信，里面有云服务器的登录密码，之后进入云服务器-实例，找到自己刚刚购买的服务器，点击登录
登录的话分好几种方式，这里我列举我本人觉得最好用的一种：ssh登录

按图示登录之后，我们就可以通过终端来控制云服务器了，首先我们搭建必要的环境：
（这里要插一句，如果你不想之后一直用命令行的话，还是装个宝塔面板吧，不然之后上传文件啥的会很烦，这都是本人的血泪史啊～，注意宝塔面板必须在这个阶段装，如果后面安装了nginx啥的就不可以装宝塔面板了）
那么我们需要安装git+node，linux环境安装git很简单：yum -y install git，安装node的话，本人用的是重新设置镜像，但是发现node版本不是最新的，这里建议大家跟着网上教程来吧：https://www.jianshu.com/p/cb29ceb08a2c，这两个装好后，基本的环境就搭建好了

后端

对于前端部署而言，后端服务很容易部署，这里需要用到的是pm2以及一个完整的node项目，node项目直接从git拉取，拉下来之后找到对应的启动文件，比如你的启动文件是app.js，正常启动需要运行node app.js，理论上来说，当运行了这个脚本后，就已经可以了，但是不久后你会惊奇的发现，10分钟不到，这个服务莫名其妙的关闭了！没错，这个时候，pm2就来了～
pm2是一个node进程管理工具，你可以用它来管理你的node进程，并查看node进程的状态，以及性能监控，负载均衡等。。。
pm2小册子：pm2简易使用手册
接下来，运行这条命令：pm2 start ./xxx.js，（xxx.js是你的node启动文件），然后你就可以通过pm2 list来查看进程啦～
服务跑好之后，测试接口是否可以访问：服务器公网ip+node服务的端口号

前端

这里仅记录我自己使用的方式：Linux 系统通过 FTP 上传文件到云服务器；参考文档：https://cloud.tencent.com/document/product/213/42501
ftp上传之前，需要确保服务器已经搭建好ftp服务https://cloud.tencent.com/document/product/213/10912
照着上面的文档撸就完事了，文件上传好之后，记录下文件在服务器中的位置，这个之后有用；
接下来就是配置nginx了，我们通过它的代理功能来让用户可以访问我们的web；
linux下安装nginx: https://www.cnblogs.com/xxoome/p/5866475.html
nginx安装好后，修改它的配置文件：nginx.conf，下面是我自己的配置文件：
这台服务器我部署了四个项目，8081，8082，8083，和80默认端口

# For more information on configuration, see:
#   * Official English Documentation: http://nginx.org/en/docs/
#   * Official Russian Documentation: http://nginx.org/ru/docs/

# user nginx;
  user root;
worker_processes auto;
error_log /var/log/nginx/error.log;
pid /run/nginx.pid;

# Load dynamic modules. See /usr/share/doc/nginx/README.dynamic.
# include /usr/share/nginx/modules/*.conf;

events {
    worker_connections 1024;
}

http {
    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  /var/log/nginx/access.log  main;

    sendfile            on;
    tcp_nopush          on;
    tcp_nodelay         on;
    keepalive_timeout   65;
    types_hash_max_size 2048;

    include             /etc/nginx/mime.types;
    default_type        application/octet-stream;

    # Load modular configuration files from the /etc/nginx/conf.d directory.
    # See http://nginx.org/en/docs/ngx_core_module.html#include
    # for more information.
    include /etc/nginx/conf.d/*.conf;
    server {
        listen 8081;
        server_name localhost1;
        root /etc/nginx/wycloud;
        charset 'utf-8';

        location / {
        root /etc/nginx/wycloud;
        index index.html;
        try_files $uri $uri/ /index.html;
}
location ~.*\.(gif|jpg|jpeg|png|bmp|swf|eot|css|svg|ttf|woff|woff2|properties|json)?$ {
 access_log off;
            root /etc/nginx/wycloud;
            expires 30d;
            break;
        }
}
    server {
        listen       8082;
       #listen       [::]:80 default_server;
        server_name  localhost2;
        root         /etc/nginx/html;
        charset 'utf-8';
        # Load configuration files for the default server block.
        include /etc/nginx/default.d/*.conf;

        location / {
root /etc/nginx/html;
index index.html;
try_files $uri $uri/ /index.html;
        }
 location ~.*\.(gif|jpg|jpeg|png|bmp|swf|eot|svg|ttf|woff|woff2|properties|json)?$ {
 access_log off;
            root /etc/nginx/html;
            expires 30d;
            break;
        }

        error_page 404 /404.html;
            location = /40x.html {
        }

        error_page 500 502 503 504 /50x.html;
            location = /50x.html {
        }
    }
server {
    listen 80;
    listen [::]:80;
    root /usr/share/nginx/blog;
    server_name lidongss;
    location / {
            # First attempt to serve request as file, then
            # as directory, then fall back to displaying a 404.
            try_files $uri $uri/ =404;
    }
   location /navigator/ {
        return 302 http://175.24.123.231:8083/;
        }
}
server {
        listen 8083;
        server_name webstack;
        charset 'utf-8';

        location / {
        root /etc/nginx/webstack;
        index index.html;
        try_files $uri $uri/ /index.html;
}
}


# Settings for a TLS enabled server.
#
#    server {
#        listen       443 ssl http2 default_server;
#        listen       [::]:443 ssl http2 default_server;
#        server_name  _;
#        root         /usr/share/nginx/html;
#
#        ssl_certificate "/etc/pki/nginx/server.crt";
#        ssl_certificate_key "/etc/pki/nginx/private/server.key";
#        ssl_session_cache shared:SSL:1m;
#        ssl_session_timeout  10m;
#        ssl_ciphers HIGH:!aNULL:!MD5;
#        ssl_prefer_server_ciphers on;
#
#        # Load configuration files for the default server block.
#        include /etc/nginx/default.d/*.conf;
#
#        location / {
#        }
#
#        error_page 404 /404.html;
#            location = /40x.html {
#        }
#
#        error_page 500 502 503 504 /50x.html;
#            location = /50x.html {
#        }
#    }

}