盘点Mac上搭建本地WebServer的几种方式
CoderWGB 人气:0
# 第一种: 通过`Nginx`搭建本地`WebServer`
**安装`nginx`**
```shell
brew install nginx
```
**安装完后在终端输入`nginx`指令，启动`nginx`查看效果**
**确定安装好之后,在根目录创建一个文件夹`MyServer`,以后文件啥的直接往里扔,通过这个目录去访问**
```shell
cd
mkdir MyServer
```
**修改配置文件`nginx.conf`,`brew`安装的`nginx`配置文件路径默认在`/usr/local/etc/nginx/nginx.conf`**
```shell
sudo vim /usr/local/etc/nginx/nginx.conf
```
**打开配置文件之后,在`43`行附近,添加一个路由映射,也就是关联上之前创建的那个目录`MyServer `**
```shell
# 书写✍️格式
location /自定义路由名/ {
alias 映射本地路径 ;
}
# 根路由一般情况下不必去修改它
location / {
root html;
index index.html index.htm;
}
# 自己映射一个路由路径
location /test/ {
alias /Users/MyNginxServer/;
}
# 编辑完保存配置,重启或者刷新配置才会生效
sudo nginx -s reload #刷新配置
sudo brew services restart nginx #重启服务
```
**往`MyServer`丢一些文件文本啥的,然后启动`nginx`去访问,查看具体效果如何**
**`nginx`常用的几条命令:**
```shell
# 启动
nginx
# 刷新配置
sudo nginx -s reload
# 重启服务
sudo brew services restart nginx 或者 sudo nginx -s restart
# 停止服务
sudo brew services stop nginx 或者 sudo nginx -s stop
# 查看启动情况
ps -ef|grep nginx
```
# 第二种 Mac自带的apahe
**其实Mac自带apache服务,只是需要一个起手式就能开启服务**
```shell
#!/bin/bash
webServer() {
echo "======================================"
echo "请选择需要执行的apache命令选项"
echo "0. 开启apache "
echo "1. 重启apache"
echo "2. 关闭apache"
echo "3. 部署目录或者文件到apache根目录"
echo "======================================"
read -p "输入选项编号：" number
case $number in
0) startApache
;;
1) restartApache
;;
2) stopApache
;;
3) movePathToApache
;;
esac
}
#开启
startApache (){
sudo /usr/sbin/apachectl start
}
#重启
restartApache (){
sudo /usr/sbin/apachectl restart
}
#停止
stopApache (){
sudo /usr/sbin/apachectl stop
}
#部署
movePathToApache (){
read -p "输入需要部署的项目路径: " root_proj_dir
webServer_dir="/Library/WebServer/Documents"
sudo cp -R ${root_proj_dir} ${webServer_dir}
echo "已部署至127.0.0.1目录下"
open /Library/WebServer/Documents
}
####################################################
webServer
```
# 第三种 Node.js 不过需要通过写代码来实现
**首先得先安装`node`环境**
**其次参考github上的demo**
```shell
git clone https://wwww.github.com/WangGuibin/FlutterStudyDailyCase.git
cd node_server
npm install
npm start
# 路由在config.js中配置 公共文件夹是public即根路由
# 接口编写参考`testData.js` 的写法
```
# 第四种 使用`Dart`语言编写
**具体可参考**
```shell
git clone https://wwww.github.com/WangGuibin/FlutterStudyDailyCase.git
cd dart_webserver
#除了pubspec.yaml 其实就一个main.dart文件而已
```
# 第五种 使用`Python`建立临时本地服务(最简单)
**默认端口是`8080`**
```shell
# python2.7
python -m SimpleHTTPServer 8089
# python3.x
python -m http.server 8090
# 默认是在根目录 打开之后可以通过浏览器访问你的目录文件
```
# 目前掌握的,先就是这些了 ^_^ 以后有机会接触到其他的再更新.
**确定安装好之后,在根目录创建一个文件夹`MyServer`,以后文件啥的直接往里扔,通过这个目录去访问**
```shell
cd
mkdir MyServer
```
**修改配置文件`nginx.conf`,`brew`安装的`nginx`配置文件路径默认在`/usr/local/etc/nginx/nginx.conf`**
```shell
sudo vim /usr/local/etc/nginx/nginx.conf
```
**打开配置文件之后,在`43`行附近,添加一个路由映射,也就是关联上之前创建的那个目录`MyServer `**
```shell
# 书写✍️格式
location /自定义路由名/ {
alias 映射本地路径 ;
}
# 根路由一般情况下不必去修改它
location / {
root html;
index index.html index.htm;
}
# 自己映射一个路由路径
location /test/ {
alias /Users/MyNginxServer/;
}
# 编辑完保存配置,重启或者刷新配置才会生效
sudo nginx -s reload #刷新配置
sudo brew services restart nginx #重启服务
```
**往`MyServer`丢一些文件文本啥的,然后启动`nginx`去访问,查看具体效果如何**
**`nginx`常用的几条命令:**
```shell
# 启动
nginx
# 刷新配置
sudo nginx -s reload
# 重启服务
sudo brew services restart nginx 或者 sudo nginx -s restart
# 停止服务
sudo brew services stop nginx 或者 sudo nginx -s stop
# 查看启动情况
ps -ef|grep nginx
```
# 第二种 Mac自带的apahe
**其实Mac自带apache服务,只是需要一个起手式就能开启服务**
```shell
#!/bin/bash
webServer() {
echo "======================================"
echo "请选择需要执行的apache命令选项"
echo "0. 开启apache "
echo "1. 重启apache"
echo "2. 关闭apache"
echo "3. 部署目录或者文件到apache根目录"
echo "======================================"
read -p "输入选项编号：" number
case $number in
0) startApache
;;
1) restartApache
;;
2) stopApache
;;
3) movePathToApache
;;
esac
}
#开启
startApache (){
sudo /usr/sbin/apachectl start
}
#重启
restartApache (){
sudo /usr/sbin/apachectl restart
}
#停止
stopApache (){
sudo /usr/sbin/apachectl stop
}
#部署
movePathToApache (){
read -p "输入需要部署的项目路径: " root_proj_dir
webServer_dir="/Library/WebServer/Documents"
sudo cp -R ${root_proj_dir} ${webServer_dir}
echo "已部署至127.0.0.1目录下"
open /Library/WebServer/Documents
}
####################################################
webServer
```
# 第三种 Node.js 不过需要通过写代码来实现
**首先得先安装`node`环境**
**其次参考github上的demo**
```shell
git clone https://wwww.github.com/WangGuibin/FlutterStudyDailyCase.git
cd node_server
npm install
npm start
# 路由在config.js中配置 公共文件夹是public即根路由
# 接口编写参考`testData.js` 的写法
```
# 第四种 使用`Dart`语言编写
**具体可参考**
```shell
git clone https://wwww.github.com/WangGuibin/FlutterStudyDailyCase.git
cd dart_webserver
#除了pubspec.yaml 其实就一个main.dart文件而已
```
# 第五种 使用`Python`建立临时本地服务(最简单)
**默认端口是`8080`**
```shell
# python2.7
python -m SimpleHTTPServer 8089
# python3.x
python -m http.server 8090
# 默认是在根目录 打开之后可以通过浏览器访问你的目录文件
```
# 目前掌握的,先就是这些了 ^_^ 以后有机会接触到其他的再更新.
加载全部内容