windows下通过npm scripts脚本命令运行shell后启动nginx

1. 写在前面

本地开发时，进行数据获取时难免会遇到跨域问题，看到控制台那一串红色的报错： 此时加班的你，想必已经是口吐芬芳了，打开网页一搜，铺面而来的是“解决跨域的8中方法”,“什么是跨域”...内心万马奔腾...我不听，我不听，我只想获取到数据...

• 回到正题，这里不说解决跨域的方法，我们讲如何在项目中(windows电脑)使用npm scripts脚本命令启动nginx，即在项目根目录的package.json中，scripts里配置自己的命令，如npm run nginx:start即可启动nginx，这样是不是很方便，假装很方便，手动狗头。
• 至于mac电脑上安装、启动nginx很方便，可以使用brew安装sudo brew install nginx,这里不细说，可以参考这篇文章mac上安装Nginx详细教程

2. shell脚本学习

这里考虑使用shell脚本来启动nginx，然后使用node 执行shell，这样就可以通过一条命令来启动nginx了。Shell 教程，来简单的学些下shell。

1. 变量

推荐给所有变量加上花括号，这是个好的编程习惯。

#!/bin/bash

name="jack"
echo hello ${name}
# hello jack

2. 字符串

推荐使用双引号，双引号里可以有变量，双引号里可以出现转义字符

#!/bin/bash

str1='this is a string'
name="jack"
age="18"
str2=str="hello \"${name}\", ${age} years old"
echo -e ${str}
# hello "jack", 18 years old

3. Shell流程控制-if else

if condition
then
    command1 
    command2
    ...
    commandN 
fi

if判断多个条件写法

 if (( a > b )) && (( a < c )) 

或者这样写

 if [[ $a > $b ]] && [[ $a < $c ]] 

4. Shell流程控制-case

case 值 in
模式1)
    command1
    command2
    ...
    commandN
    ;;
模式2）
    command1
    command2
    ...
    commandN
    ;;
esac

5. Shell 传递参数

我们可以在执行 Shell 脚本时，向脚本传递参数，脚本内获取参数的格式为：$n。n 代表一个数字，1 为执行脚本的第一个参数，2 为执行脚本的第二个参数，以此类推……

#!/bin/bash

echo "执行的文件名：$0";
echo "第一个参数为：$1";
echo "第二个参数为：$2";

执行脚本输出如下：

$ chmod +x test.sh 
$ ./test.sh 1 2 3
# Shell 传递参数实例！
# 执行的文件名：./test.sh
# 第一个参数为：1
# 第二个参数为：2

3.编写属于我们自己的shell脚本

1. 项目目录

├── nginx
├── node_modules
├── package.json
├── public
├── README.md
├── src
├── nginx.sh
├── download.sh
├── nginx.conf
└── yarn.lock

2. 思路

分为download.sh下载nginx使用和nginx.sh启动nginx使用

3. nginx.sh

#!/bin/bash
CRTDIR=$(cd $(dirname $0); pwd) #当前目录
NGINX_DIR="nginx"
cd "${CRTDIR}/${NGINX_DIR}" #切到当前nginx根目录

NGINX="./nginx.exe"
NGINX_CONF="./conf/nginx.conf" #当前目录的nginx配置文件
Start="start ${NGINX}" #启动nginx
Stop="${NGINX} -s stop" #关闭
Reload="${NGINX} -s reload" #重载

case "$1" in 
  "start")
    echo "nginx start"
    # https://blog.csdn.net/yf210yf/article/details/9207335
    cp ${CRTDIR}/nginx.conf -f ${CRTDIR}/${NGINX_DIR}/conf # 拷贝根目录下的nginx.conf到 /nginx/conf目录下 
    ${Start} -c ${NGINX_CONF}
    ;;
  "stop")
    echo "nginx stop"
    ${Stop}
    ;;
  "reload")
    echo "nginx reload"
    ${Reload}
    ;;
  *)
    echo commond not exist!
    exit 1
esac

4. download.sh

#!/bin/bash
CRTDIR=$(cd $(dirname $0); pwd) #当前目录
NGINX_DIR="nginx"
NGINX_File="nginx/nginx.exe"
NGINX_VERSION="1.16.0"
NGINX_RENAME="nginx.zip"
downloadPath="http://nginx.org/download/nginx-${NGINX_VERSION}.zip"

# https://www.jb51.net/article/102277.htm
if [[ -d "${NGINX_DIR}" ]] && [[ -f "${NGINX_File}" ]]
then
  echo "nginx found, nginx start..."
  # cp ./nginx.conf -f ${CRTDIR}/${NGINX_DIR}/conf 
  # 调用 nginx.sh
  source ./nginx.sh start 
else
  echo "nginx not found, downloading nginx..."
  # 删除旧的文件
  rm -rf "${CRTDIR}/${NGINX_DIR}"
  rm -rf "${CRTDIR}/${NGINX_RENAME}"
  # wget "$downloadPath" -O nginx.zip && unzip nginx.zip -d .
  # 下载nginx
  # 解压到相应目录
  # 文件夹重命名
  # 删除压缩文件
  # 拷贝根目录下的nginx.conf到 /nginx/conf目录下 
  # 启动nginx
  curl -o "${NGINX_RENAME}" "${downloadPath}"
  unzip "${NGINX_RENAME}" -d .
  mv "${CRTDIR}/nginx-${NGINX_VERSION}" "${CRTDIR}/${NGINX_DIR}"
  rm -f "${NGINX_RENAME}"
  cp ./nginx.conf -f ${CRTDIR}/${NGINX_DIR}/conf
  source ./nginx.sh start
fi

5. 配置package.json中scripts脚本命令

"scripts": {
  "download": "bash download.sh",
  "nginx:start": "sh ./nginx.sh start",
  "nginx:stop": "sh ./nginx.sh stop",
  "nginx:reload": "sh ./nginx.sh reload"
}

6. 启动，关闭，重载nginx

# 下载nginx
npm run download
# 启动nginx
npm run nginx:start
# 关闭nginx
npm run nginx:stop
# 重新载入nginx
npm run nginx:reload

启动nginx

$ yarn run nginx:start
yarn run v1.13.0
$ sh ./nginx.sh start
nginx start
Done in 0.28s.

关闭nginx

$ yarn run nginx:stop
yarn run v1.13.0
$ sh ./nginx.sh stop
nginx stop
Done in 0.23s.

4. 注意点

windows下请使用git bash运行命名，或者下载cmder然后运行命令，windows自带的命令行运行会报错。

5. 参考资料

1. Shell菜鸟教程
2. nginx下载
3. mac上安装Nginx详细教程
4. shell脚本----cp (copy)复制文件或目录
5. 使用Bash Shell检查文件是否存在的方法