为线上机器安装前端环境

in vps相关 with 0 comment

  1. 安装nvm

    wget -qO- https://raw.githubusercontent.com/creationix/nvm/v0.40.0/install.sh | bash
curl -o- https://raw.githubusercontent.com/creationix/nvm/v0.40.0/install.sh | bash

    安装完成之后 source ~/.bashrc 将nvm加入到系统环境
    nvm list-romote 查看node可用版本

    nvm install v10.16.0 安装node
nvm list-romote 查看node可用版本

    参考链接

  2. 安装nginx
    通过yum安装

    yum install -y nginx

    安装之后通过 service nginx start 启动nginx
    配置nginx服务 /etc/nginx/nginx.conf

    user  root;
worker_processes  auto;

error_log  /var/log/nginx/error.log warn;
pid        /var/run/nginx.pid;

events {
    worker_connections  10240;
}    

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

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

    access_log  /var/log/nginx/access.log  main;
    server_tokens off;
    sendfile        on;
    tcp_nopush     on;
    tcp_nodelay on;
    log_not_found off;
    client_max_body_size 16M;

    keepalive_timeout  60;

    gzip  on;

    include /etc/nginx/conf.d/*.conf;
}

    在上述代码中有一行

    include /etc/nginx/conf.d/*.conf;

    可在conf.d文件夹中新增不同的.conf文件,每个文件都是一个server
    方便用来维护不同项目;

    示例:
server {
    listen       81;
    server_name  localhost;

    location / {
        root   /usr/local/www/xxxxx/dist;
        index  index.html index.htm;
    }

    error_page   500 502 503 504  /50x.html;
    location = /50x.html {
        root   /usr/share/nginx/html;
    }
}
server {
    listen       1106;
    server_name  localhost;
    location ^~ /page/ {
        try_files $uri $uri/ /page/index.html;
        alias /usr/local/www/xxxx/output/page/;
    }
    error_page   500 502 503 504  /50x.html;
    location = /50x.html {
        root   /usr/share/nginx/html;
    }
}

    nginx配置实战

  3. 下载@vue/cli;webpack;webpack-cli;
    在这个过程中可能会下载@vue/cli失败,报类似sh: node command not found;
    可先尝试sudo -i 再次执行npm i (可能并不是git版本低)
    这个是因为git版本低,默认应该是1.7.1,需要对其进行升级

    0）安装依赖软件
[root@uatjenkins01 ~]# yum install curl-devel expat-devel gettext-devel openssl-devel zlib-devel asciidoc
[root@uatjenkins01 ~]# yum install  gcc perl-ExtUtils-MakeMaker

1）卸载系统自带的底版本git（1.7.1）
[root@uatjenkins01 ~]# git --version
git version 1.7.1
[root@uatjenkins01 ~]# yum remove git

2）编译安装最新的git版本 
[root@uatjenkins01 ~]# cd /usr/local/src/
[root@uatjenkins01 src]# wget https://www.kernel.org/pub/software/scm/git/git-2.15.1.tar.xz(此地址下载较慢)
[root@uatjenkins01 src]# tar -vxf git-2.15.1.tar.xz
[root@uatjenkins01 src]# cd git-2.15.1
[root@uatjenkins01 git-2.15.1]# make prefix=/usr/local/git all
[root@uatjenkins01 git-2.15.1]# make prefix=/usr/local/git install
[root@uatjenkins01 git-2.15.1]# echo "export PATH=$PATH:/usr/local/git/bin" >> /etc/profile
[root@uatjenkins01 git-2.15.1]# source /etc/profile

[root@uatjenkins01 ~]# git --version
git version 2.15.1

======================================================================
如果是非root用户使用git，则需要配置下该用户下的环境变量
[app@uatjenkins01 ~]$ echo "export PATH=$PATH:/usr/local/git/bin" >> ~/.bashrc
[app@uatjenkins01 ~]$ source ~/.bashrc
[app@uatjenkins01 ~]$ git --version
git version 2.15.1

    centos下升级git版本的操作记录

  4. 克隆项目

    cd /usr/local/www //如果没有www文件夹 mkdir www
git clone xxxxx.git
//在此可能会有clone不成功的情况,是因为没有配置对应的.ssh
//将本地id_rsa文件和id_rsa_pub文件拷贝到服务器上,并运行chmod 700 id_rsa
//需要将本地的.ssh中的public_key拷贝到服务器上,方可成功clone文件
//克隆完成后进入文件夹,npm install 下载node_modules可能会无法下载
使用
npm install --ignore-scripts
//npm不运行在pacakge.json文件里指定的脚本

  5. 设置项目执行脚本

    #/bin/bash
cd /usr/local/www/xxx
git pull
npm run build
scp -r ./dist/ root@xx.xx.x.xxx:/usr/local/www/xxx

    执行这段脚本来打包vue前端项目; 这是一个.sh文件
    scp 这段命令是用来将这个服务器的内容,传至另一个服务器的指定文件夹内
    rm * -f //删除该目录下的所有文件

本文由 ws 创作，采用 知识共享署名4.0 国际许可协议进行许可
本站文章除注明转载/出处外，均为本站原创或翻译，转载前请务必署名
最后编辑时间为: Jan 12, 2022 at 07:12 am

← → ↓ ↑
Responses