一.安装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并访问

  1. 对nginx配置,使其正常访问
  2. 调整nginx配置,刷新前端路由能正常访问
  3. 调整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的面板上操作以上命令
请添加图片描述
请添加图片描述

Logo

权威|前沿|技术|干货|国内首个API全生命周期开发者社区

更多推荐