Mac 前端环境配置

前言

Q3季度去上海出差的时候，我的 Mac（M1）因为升级了系统就直接卡死了，公司 IT 老哥跟我说只能重装系统并且无法拿到本地文件，我当时挺难受的😣，因为我的很多文档都是记录在本地的 Typora 中的，还有一些笔记之类的东西。

所以我的笔记要靠回忆一点点复原，环境要重新安装，虽然所有的东西都是轻车熟路，但还是要一步一步的去查某个工具的安装方法，还是有些繁琐的😔，所以在我重新安装的时候我就记录了一下大致的安装过程和相对应的网址，方便下次出问题的时候方便使用

还有一个建议，最好不要把重要的东西放在本地，一定要存放在云端，或者可以像我一样，存储在 Github 上。众所周知，Github 是一个网盘😊

Mac 前端环境配置

Homebrew

官网：https://brew.sh/

首先要下载的就是 Homebrew Mac 的包管理器🐮，必备但不自带，我称之为神器。就像 Linux 中的 yum、wget 一样好用极了。

官方文档命令下载较慢且大部分时候都是下载失败, 可使用国内源

官方源

/bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/HEAD/install.sh)"

国内源

/bin/zsh -c "$(curl -fsSL https://gitee.com/cunkai/HomebrewCN/raw/masteHomebrew.sh)"

Git

官网：https://git-scm.com/
这个我就不多说了，必备的代码管理工具，因为它是某些包安装的前置条件，所以最好尽早安装。

brew install git

基本配置

git config --global user.name "你的名字或昵称"   初始化名称
git config --global user.email "你的邮箱"       初始化邮箱
git config --global -l                         查看刚刚设置 的名称、邮箱
// 多公钥配置，可忽略此处，直接看下一部分
ssh-keygen -t rsa -C "你提交代码的邮箱"           密钥生成
cat ~/.ssh/id_rsa.pub                          查看生成的公钥，复制到 Github 等代码库

多公钥配置

gitee 已经讲的很详细了，所以直接看吧🀄️！

https://gitee.com/help/articles/4229#article-header0

Node

官网：https://nodejs.org/zh-cn/

前端必备 javascript 的运行环境。😯一般的 node 管理器在版本切换的时候不起作用，是因为在使用 brew 安装时 node 的安装路径不是默认的，与类似 nvm 的管理器默认路径不同，所以 nvm 找不到、替换不了当前 node 版本。

node 版本目前建议在 14 左右就好，因为高版本的 node 在 npm 安装 node-sass 这个包的时候会出现安装不上的问题，node-sass 对 node 版本的要求很严格， 如果你的项目使用不到的话就无所谓了。

brew search node                       // 搜索 node 版本
brew install node                      // 安装最新版本
brew install node@14                   // 安装指定版本
brew uninstall node@14                 // 卸载指定版本
brew link --overwrite --force node@14  // 切换到指定版本

iTerm2

比 Mac 自带的终端更好用的终端👌。

这个很多人都这么说，可能是我对终端的需求范围比较小，觉得跟自带的终端差不多，身边的人也大多是用它来安装一个花里胡哨的主题。

brew install iTerm2

curl

官网：https://curl.se/
常用的命令行工具，用来请求 Web 服务器。如果熟练的话，完全可以取代 Postman 这一类的图形界面工具。

这个确实是一个神器，灰常好用。使用方法可以看看 阮一峰 大神的介绍，很详细了！

最近还有一个关于 curl 作者被 500 强公司要求为他们提供支持的新闻，链接我放下面了。

所以说，有些人赚钱比的是谁的脸皮厚！链接

brew install curl

使用文章： https://www.ruanyifeng.com/blog/2019/09/curl-reference.html

oh-my-zsh

官网：https://ohmyz.sh/
前置安装：git、curl

💪强大的 shell 终端，简单、易用。这个确实比 Mac 自带的 bash 好用多了，属于用了就回不去的那种。官方网站已经说的很详细了，直接看官网就可以

curl 方式下载
sh -c "$(curl -fsSL https://raw.github.com/ohmyzsh/ohmyzsh/master/tools/install.sh)"
chsh -s /bin/zsh   // 切换为zsh  重启终端即可使用 zsh
chsh -s /bin/bash  // 切换为bash 重启终端即可使用 bash

Mysql

关系型数据库。

不要怀疑哈🤨，前端环境确实是需要它。俗话说，不懂数据库的前端不是一个好全栈，当然也包括 Redis 缓存层。

数据库下载：https://dev.mysql.com/downloads/file/?id=508094

打开 “系统偏好设置” 最下方会出现 Mysql 的图标，可查看当前 Mysql 的状态以及各文件地址。

大部分都停留在 5.7 版本。 8.0 及以上版本的默认为强密码，在 Egg 等类似的框架上还未支持此方式连接（估计要很久以后了吧，毕竟 5.7 就跟 centos7 一样命硬），如果链接过程中出现未支持等情况，大多数为此类原因，可以通过 “系统偏好设置” 中的操作面板，初始化 Mysql 为第二选项（非强密码选项）即可解决。

Redis

安装

搜索 redis 版本

$ brew search redis 
==> Formulae
hiredis             redis               redis@3.2           redir
iredis              redis-leveldb       redis@4.0           redo

安装指定版本

如：brew install redis@3.2 这里安装默认版。

$ brew install redis 
==> Downloading https://ghcr.io/v2/homebrew/core/redis/manifests/7.0.0
Already downloaded: /Users/wooc/Library/Caches/Homebrew/downloads/6857c40685046caebfdb95b17e9503bed0028f51211c082c6a5200bad199f94e--redis-7.0.0.bottle_manifest.json
==> Downloading https://ghcr.io/v2/homebrew/core/redis/blobs/sha256:79e59848cb1a
Already downloaded: /Users/wooc/Library/Caches/Homebrew/downloads/898a53b88e4b73567f9f377cc41fb6071af41030a798748901f945f00698f68b--redis--7.0.0.arm64_monterey.bottle.tar.gz
==> Pouring redis--7.0.0.arm64_monterey.bottle.tar.gz
==> Caveats
To restart redis after an upgrade:
  brew services restart redis
Or, if you don't want/need a background service you can just run:
  /opt/homebrew/opt/redis/bin/redis-server /opt/homebrew/etc/redis.conf
==> Summary
🍺  /opt/homebrew/Cellar/redis/7.0.0: 14 files, 2.6MB
==> Running `brew cleanup redis`...
Disable this behaviour by setting HOMEBREW_NO_INSTALL_CLEANUP.
Hide these hints with HOMEBREW_NO_ENV_HINTS (see `man brew`).

安装信息

安装成功后根据 Caveats 输出的内容，我们获得了以下几项信息

brew services restart redis                // 升级并重启 redis 命令
brew cleanup redis                         // 清理 redis
/opt/homebrew/opt/redis/bin/redis-server   // 启动服务命令
/opt/homebrew/etc/redis.conf               // 配置文件地址
/opt/homebrew/Cellar/redis/7.0.0           // redis 版本为 7.0.0

redis 配置

根据安装信息可知配置文件地址为：/opt/homebrew/etc/redis.conf

$ vim  /opt/homebrew/etc/redis.conf

根据你的需要配置即可，配置项可见官方文档：https://redis.io/

启动服务

// redis-server /opt/homebrew/etc/redis.conf 可指定配置文件，这里未指定，所以为默认配置文件
$ redis-server 
88027:C 02 Jun 2022 11:36:33.256 # oO0OoO0OoO0Oo Redis is starting oO0OoO0OoO0Oo
88027:C 02 Jun 2022 11:36:33.256 # Redis version=7.0.0, bits=64, commit=00000000, modified=0, pid=88027, just started
88027:C 02 Jun 2022 11:36:33.256 # Warning: no config file specified, using the default config. In order to specify a config file use redis-server /path/to/redis.conf
88027:M 02 Jun 2022 11:36:33.257 * Increased maximum number of open files to 10032 (it was originally set to 256).
88027:M 02 Jun 2022 11:36:33.257 * monotonic clock: POSIX clock_gettime
                _._
           _.-``__ ''-._
      _.-``    `.  `_.  ''-._           Redis 7.0.0 (00000000/0) 64 bit
  .-`` .-```.  ```\/    _.,_ ''-._
 (    '      ,       .-`  | `,    )     Running in standalone mode
 |`-._`-...-` __...-.``-._|'` _.-'|     Port: 6379
 |    `-._   `._    /     _.-'    |     PID: 88027
  `-._    `-._  `-./  _.-'    _.-'
 |`-._`-._    `-.__.-'    _.-'_.-'|
 |    `-._`-._        _.-'_.-'    |           https://redis.io
  `-._    `-._`-.__.-'_.-'    _.-'
 |`-._`-._    `-.__.-'    _.-'_.-'|
 |    `-._`-._        _.-'_.-'    |
  `-._    `-._`-.__.-'_.-'    _.-'
      `-._    `-.__.-'    _.-'
          `-._        _.-'
              `-.__.-'

88027:M 02 Jun 2022 11:36:33.258 # WARNING: The TCP backlog setting of 511 cannot be enforced because kern.ipc.somaxconn is set to the lower value of 128.
88027:M 02 Jun 2022 11:36:33.258 # Server initialized
88027:M 02 Jun 2022 11:36:33.259 * The AOF directory appendonlydir doesn't exist
88027:M 02 Jun 2022 11:36:33.259 * Ready to accept connections

出现以上信息则 redis 启动成功，准备接受链接

VsCode

官网：https://code.visualstudio.com/download#

目前最受欢迎的编辑器，我的饭碗🥣。vscode 也已经有 M1 的版本。

brew cask install visual-studio-code

vscode 的快捷命令配置还是很多的，有一些跟随项目的配置文件，好用的配置插件，这里就先说两个吧。

快捷打开编辑器

使用命令打开

打开 VS Code，打开控制面板（⇧⌘P），输入 "shell command"，在提示里看到 Shell Command: Install "code" command in PATH，点击安装。
终端进入到指定文件夹，执行 code . || code filename 便可以使用 vscode 打开当前文件夹

拓展插件

Markdown Preview Github Stylin

本地 md 文档样式上传到 Github、npm 时，经常出现本地与线上表现不一致的问题👀。相信经常更新 npm 包的老板们都经历过文档在 Github、npm 上都展示的很丑的情况，但在本地 md 文档上显示很好。

此插件可在编写时预览本地 md 文档在 Github 上展现的样式。

Docker

官网：https://hub.docker.com/editions/community/docker-ce-desktop-mac

docker 也是一个前端应该必备的工具了，做 CI/CD 必不可少的工具，了解整个前端的构建流程。K8s 的话就有点远了，应该很少有使用到容器编排的需要。

目前也有 M1 版本的了，直接官网下载安装包安装即可。

或者可以通过命令行安装非桌面版的

brew install docker

Typora

官网：https://typora.io/

目前使用过的最好用的 md 文档编辑器👌。虽然它已经开始收费了，单但目前它的替代品跟它比确实是稍逊一筹。

到这里，基本的环境配置就差不多了！很想知道你们有没有什么开发利器可以推荐给我！

常见问题

443

问题再现

Failed to connect to raw.githubusercontent.com port 443: Connection refused

问题原因

软件包的地址访问不到或域名污染，可通过查找该域名真实 ip 的方式，选择一个最近的 ip 配置在域名文件中，使下载文件时的域名解析根据你配置的 ip 地址去访问。

问题解决

1、查询真实 ip
进入 https://ipaddress.com 首页,输入 raw.githubusercontent.com 查询到真实 IP 地址为 185.199.108.133

$ sudo vi /etc/hosts  
##
# Host Database
#
# localhost is used to configure the loopback interface
# when the system is booting.  Do not change this entry.
##
127.0.0.1       localhost
255.255.255.255 broadcasthost
::1             localhost
185.199.108.133 raw.githubusercontent.com

# shell 操作
## 显示一下内容后按下 i 键进入编辑模式，通过方向键将光标移动道🈯️定位置输入内容
## 输入完成后按下 esc 按键退出编辑模式。
## 按下组合键 shift + : 按键进入命令模式
## 输入 wq 并回车，保存修改被容并退出编辑模式。

然后保存即可