一.安装Nginx，并启动
Nginx是一个高性能的HTTP和反向代理web服务器,也可以用来做负载均衡
brew install nginx # 安装
nginx # 启动
nginx -s nginx # 停止
nginx -s reload # 重启
brew info nginx # nginx安装信息
cd opt/homebrew/Cellar/nginx # nginx被安装的目录
cat opt/homebrew/etc/nginx/nginx.conf # nginx.conf文件所在目录
二. 将spa应用配置到nginx并访问
- 对nginx配置,使其正常访问
- 调整nginx配置，刷新前端路由能正常访问
- 调整nginx配置，使demo页跨域访问外部接口，控制台显示 接口数据
<!DOCTYPE html>
<html>
<head>
<title>Demo</title>
<meta charset="UTF-8" />
<meta
name="viewport"
content="width=device-width, initial-scale=1.0, maximum-scale=1.0,minimum-scale=1, user-scalable=no"
/>
<meta name="format-detection" content="telephone=no" />
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="apple-mobile-web-app-status-bar-style" content="black" />
<meta http-equiv="Expires" content="0" />
<meta http-equiv="Cache-Control" content="no-cache" />
<meta http-equiv="Pragma" content="no-cache" />
<meta http-equiv="x-rim-auto-match" content="none" />
<script src="https://unpkg.com/vue@3"></script>
<script src="https://unpkg.com/vue-router@4"></script>
</head>
<body>
<div id="app">
<h1>Hello App!</h1>
<p>
<!-- 使用 router-link 组件来导航. -->
<!-- 通过传入 `to` 属性指定链接. -->
<!-- <router-link> 默认会被渲染成一个 `<a>` 标签 -->
<router-link to="/foo">Go to Foo</router-link>
<router-link to="/bar">Go to Bar</router-link>
<button @click="getData">点击获取数据</button>
<button @click="getHotel">点击获取酒店</button>
</p>
<!-- 路由出口 -->
<!-- 路由匹配到的组件将渲染在这里 -->
<router-view></router-view>
</div>
<script>
const Foo = { template: "<div>foo</div>" };
const Bar = { template: "<div>bar</div>" };
// 2. 定义路由
// 每个路由应该映射一个组件。 其中"component" 可以是
// 通过 Vue.extend() 创建的组件构造器，
// 或者，只是一个组件配置对象。
// 我们晚点再讨论嵌套路由。
const routes = [
{ path: "/foo", component: Foo },
{ path: "/bar", component: Bar },
];
// 3. 创建 router 实例，然后传 `routes` 配置
// 你还可以传别的配置参数, 不过先这么简单着吧。
const router = VueRouter.createRouter({
// 4. 内部提供了 history 模式的实现。为了简单起见，我们在这里使用 hash 模式。
history: VueRouter.createWebHistory(),
routes, // `routes: routes` 的缩写
});
// 4. 创建并挂载根实例
const app = Vue.createApp({
methods: {
getData: async function (e) {
fetch("/api/health/").then((response) =>
console.log("apiRes:", response)
);
},
},
});
//确保 _use_ 路由实例使
//整个应用支持路由。
app.use(router);
app.mount("#app");
</script>
</body>
</html>
# 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 8088;
server_name localhost;
location / {
# nginx.confg中修改location中的root为demo的绝对路径
root /opt/homebrew/var/www/demo;
index index.html index.html;
# 解决刷新404问题 $uri 是 ngnix 的变量，存放着用户访问地址。对应端口后的路径 按顺序读取，最后一个兜底
try_files $uri $uri/ /index.html;
#开启目录文件列表
autoindex on;
}
location /api {
proxy_pass https://hotel-international.fast-cn.wgine.com;
}
error_page 500 502 503 504 /50x.html;
location = /50x.html {
root html;
}
}
include servers/*;
}
三. 安装Docker并将包含demo spa 的nginx打包到docker，在本地启动访问
Docker 是一个开源的应用容器引擎，基于Go 语言并遵从 Apache2.0 协议开源。
Docker 可以让开发者打包他们的应用以及依赖包到一个轻量级、可移植的容器中，然后发布到任何流行的 Linux 机器上，也可以实现虚拟化。
容器是完全使用沙箱机制，相互之间不会有任何接口（类似 iPhone 的 app）,更重要的是容器性能开销极低。
安装docker
brew install --cask docker # 安装docker
创建并配置构建镜像的文本文件Dockerfile
# 基于nginx
FROM nginx
# 将本地的nginx配置 拷贝到docker对应的nginx上
COPY ./nginx.conf /etc/nginx/nginx.conf
# 将单页面应用 拷贝到容器nginx对应的地方
COPY ./index.html /usr/share/nginx/html
# 标明该应用端口地址 无实际意义
EXPOSE 8088
使用docker image build根据Dockerfile打包成镜像
docker image build ./ -t docker-test:1.0.1
使用docker container create根据镜像创景容器
docker container create -p 3001:8088 docker-test:1.0.1
使用docker container start根据镜像创景容器
docker container start xxx # xxx 为上一条命令运行得到的结果，也就是容器id
也可以在docker的面板上操作以上命令
