https://docs.nginx.com/nginx/admin-guide/installing-nginx/installing-nginx-open-source/
CentOS:
sudo yum install epel-release
sudo yum update
sudo yum install nginx
macOS:
sudo brew install nginx
nginx 命令: sudo service nginx start|stop|restart|reload
或者 sudo nginx -s reload|reopen|stop|quit
mac 下命令 sudo brew services start|stop|restart|reload nginx
https://docs.nginx.com/nginx/admin-guide/installing-nginx/installing-nginx-open-source/#sources
安装依赖:
PCRE
wget ftp://ftp.csx.cam.ac.uk/pub/software/programming/pcre/pcre-8.42.tar.gz
tar -zxf pcre-8.42.tar.gz
cd pcre-8.42
./configure
make
sudo make install
zlib
wget http://zlib.net/zlib-1.2.11.tar.gz
tar -zxf zlib-1.2.11.tar.gz
cd zlib-1.2.11
./configure
make
sudo make install
openssl
wget http://www.openssl.org/source/openssl-1.0.2p.tar.gz
tar -zxf openssl-1.0.2p.tar.gz
cd openssl-1.0.2p
./Configure darwin64-x86_64-cc --prefix=/usr/local
make
sudo make install
下载nginx 源码
wget https://nginx.org/download/nginx-1.15.2.tar.gz
tar zxf nginx-1.15.2.tar.gz
cd nginx-1.15.2
配置
./configure --add-module=../nginx-module/ngx_brotli # 添加你需要编译的模块的路径
编译安装
make
sudo make install
配置环境变量
export PATH=$PATH:/usr/local/nginx/sbin
查看信息
nginx -V
查看 nginx 配置文件 /usr/local/nginx/conf/nginx.conf
worker_processes 1;
events {
worker_connections 1024;
}
http {
include mime.types;
default_type application/octet-stream;
sendfile on;
keepalive_timeout 65;
}
server {
listen 80;
server_name localhost;
root /Users/xxxx/static-site;
location / {
try_files $uri /index.html;
}
}
对于 react vue angular 若设置了 html5 histroy router 可以通过 try_files $uri /index.html;
以支持
证书我们选用 Let's Encrypt。按照官方教程,推荐使用 certbot ACME client。certbot 可以自动进行证书的颁发和安装。
按照 certbot 的官网:https://certbot.eff.org/,选择服务器 nginx 和操作系统 ubuntu
执行以下命令
输入 sudo certbot --nginx
自动配置 nginx。
它将会对 nginx 新增如下类似的配置:
server {
...
listen 443 ssl; # managed by Certbot
ssl_certificate /etc/letsencrypt/live/bbs.chainx.org/fullchain.pem; # managed by Certbot
ssl_certificate_key /etc/letsencrypt/live/bbs.chainx.org/privkey.pem; # managed by Certbot
include /etc/letsencrypt/options-ssl-nginx.conf; # managed by Certbot
ssl_dhparam /etc/letsencrypt/ssl-dhparams.pem; # managed by Certbot
}
https://github.com/FiloSottile/mkcert 创建一张证书。
安装 mkcert
brew install mkcert
创建证书:
mkcert example.com '*.example.org' myapp.dev localhost
配置 nginx:
server {
listen 443 ssl;
server_name example.com;
root /Users/xxxx/workspace/www;
ssl_certificate /Users/xxxx/www/ssl/_wildcard.dev.test.pem;
ssl_certificate_key /Users/xxxx/www/ssl/_wildcard.dev.test-key.pem;
}
这样则为 localhost 开启了 https。 我们也可以通过配置 hosts 为本地自定义域名开启 https
使用 nginx 开启 gzip。
官方文档: http://nginx.org/en/docs/http/ngx_http_gzip_module.html
配置:
# 是否开启gzip
gzip on;
# User-Agent 如何和该正则表达式匹配,则不禁止 gzipping
gzip_disable "msie6";
# 启用gzip压缩的最小文件,小于设置值的文件将不会压缩
gzip_min_length 1024;
# �针对代理请求,可以为 off | expired | no-cache | no-store | private | no_last_modified | no_etag | auth | any ...;
# any 表示所有代理请求都开启 gzip,no-cache 代表只有 包含 no-cache 请求头开启。
gzip_proxied any;
# gzip 压缩级别,1-10,数字越大压缩的越好,也越占用CPU时间
gzip_comp_level 5;
# 进行压缩的文件类型。其中的值可以在 mime.types 文件中找到。图片不要通过 gzip 压缩,没有意义。
gzip_types
text/css
text/javascript
text/xml
text/plain
text/x-component
application/javascript
application/x-javascript
application/json
application/xml
application/rss+xml
application/x-font-ttf
application/vnd.ms-fontobject
image/svg+xml
svg
svgz;
# 是否在http header中添加Vary: Accept-Encoding
gzip_vary on;
brotli 是 google 于 2015 新发布的压缩格式,侧重于 HTTP 压缩。
与 gzip 的比较:
- https://hacks.mozilla.org/2015/11/better-than-gzip-compression-with-brotli/
- https://blog.cloudflare.com/results-experimenting-brotli/
结论:对静态资源压缩效果好,大文件效果好
安装 bagder/libbrotli 用以支持 brotli
git clone https://github.com/bagder/libbrotli
cd libbrotli
./autogen.sh # autoconf 不存在的话,先安装 brew install autoconf automake libtool
./configure
make
获取 ngx_brotli
git clone https://github.com/google/ngx_brotli.git
cd ngx_brotli
git submodule update --init
编译安装
./configure --add-module=../nginx-module/ngx_brotli #添加你需要编译的模块的路径
make
sudo make install
开启 brotli(只支持 https),配置文档 https://github.com/google/ngx_brotli
配置 nginx:
brotli on;
brotli_comp_level 6;
brotli_types
text/css
text/javascript
text/xml
text/plain
text/x-component
application/javascript
application/x-javascript
application/json
application/xml
application/rss+xml
application/x-font-ttf
application/vnd.ms-fontobject
image/svg+xml
svg
svgz;
prettier 是一个代码格式化工具。优势是考虑了代码的最大长度,对换行处理很好。而且可选的配置项很少,避免了团队里对代码风格的过多的争议。官方网站:https://prettier.io/
.prettierrc.yml:
printWidth: 120
singleQuote: true
trailingComma: 'es5'
jsxBracketSameLine: true
将每列最大显示宽度 printWidth 设置为 120,这比较符合习惯,并且也看着更舒服。
对于前端,通常来说字符串会使用单引号,HTML 和 jsx 会使用双引号。
多行 object 字面量,最后一尾加上分号,这样看着更整齐。
jsx 的末尾中括号不另起一行,和 react 官方的配置相同。
语句末尾默认是加上分号的,在我观察了几个大型前端项目后,我决定不去改变它。我的习惯依然是不加分号,不过我会依赖自动格式化给语句添加分号。
使用 lint-staged 在 git 暂存文件的时候,运行 prettier。
// package.json
{
...
"lint-staged": {
"*.{js,json,css,md}": ["prettier --write", "git add"]
},
...
}
使用 husky 配置 git hook。如 pre-commit pre-push
。我们配置 pre-commit 运行 prettier
// package.json
{
...
"husky": {
"hooks": {
"pre-commit": "lint-staged"
}
},
...
}
不需要添加到 git 版本库的文件,基于 create-react-app,做了一些自己的定制
# dependencies
/node_modules
# testing
/coverage
# production
/build
# misc
.DS_Store
.env.local
.env.development.local
.env.test.local
.env.production.local
# editor
/.vscode/settings.json
/.idea
npm-debug.log*
yarn-debug.log*
yarn-error.log*
curl 下载并执行安装脚本
curl -o- https://raw.githubusercontent.com/creationix/nvm/v0.33.11/install.sh | bash
在 ~/.bashrc(会自动添加)或者 ~/.zshrc(如果用的是 zsh)中添加下列配置
export NVM_DIR="$HOME/.nvm"
[ -s "$NVM_DIR/nvm.sh" ] && \. "$NVM_DIR/nvm.sh" # This loads nvm
使用 source ~/.bashrc
或 source ~/.zshrc
可以不重启终端,使 nvm 命令生效。
下载最新版 node
nvm install node
使用指定版本
nvm use 8.0
安装时,迁移旧版本 node 的 node_module
nvm install 6 --reinstall-packages-from=5
在不同项目之间切换版本:添加 .nvmrc 文件。
#.nvmrc
8.11.4
此后在该目录下使用如:nvm use
,nvm install
等命令,会自动指定 nvmrc 中的所指定的版本。
命令行基本用法
nodemon [options] [script.js] [args]
部分参数:
- -e, --ext 文件后缀名
- -x, --exec 需要执行的命令,如
nodemon --exec node index
- -w, --watch 需要监控的目录或者文件
- -i, --ignore 需要忽略的目录或文件
例子:
$ nodemon server.js
$ nodemon -w ../foo server.js apparg1 apparg2
$ PORT=8000 nodemon --debug-brk server.js
$ nodemon --exec python app.py
$ nodemon --exec "make build" -e "styl hbs"
$ nodemon app.js -- -V
官方文档:https://www.typescriptlang.org/docs/handbook/tsconfig-json.html
tsconfig.json
应该存在项目的根目录,当调用 tsc 命令时,编译器会从根目录搜索 tsconfig.json 文件,或者使用 -p --project 参数指定要使用的 tsconfig.json 的路径。
完整的 jsonscheme 定义:http://json.schemastore.org/tsconfig
主要用到几个属性:
{
// 编译器的配置
"compilerOptions": {
...
},
// 需要包含的文件目录,glob语法
"include": [...],
// 需要排除的文件目录,glob语法,一般设置这个就好了
"exclude": [
"node_modules", "build", "scripts", "acceptance-tests", "webpack", "test"
]
}
在 .vscode 目录下新建 launch.json