一.安装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的面板上操作以上命令
请添加图片描述
请添加图片描述

# 前端 # nginx # docker
Logo
向您推荐>>Eolink开发者社区

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

更多推荐

深入理解 Mocha 测试框架：从零实现一个 Mocha

前言什么是自动化测试自动化测试在很多团队中都是Devops环节中很难执行起来的一个环节，主要原因在于测试代码的编写工作很难抽象，99%的场景都需要和业务强绑定，而且写测试代码的编写工作量往往比编写实际业务代码的工作量更多。在一些很多业务场景中投入产出比很低，适合写自动化测试的应该是那些中长期业务以及一些诸如组件一样的基础库。自动化测试是个比较大的概念，其中分类也比较多，比如单元测试，端对端测试，集

avatar 云原生

ELK实现containerd的容器日志采集展示【基于logging的全栈监测】

企业级ELK Stack构建介绍

avatar 云原生

(20200916 Solved)docker-compose up创建容器自动退出

问题描述如题，创建容器后自动退出了。并且docker start container无效解决方案原因是缺失了控制终端的配置，需要在docker-compose.yml中增加tty:true ，有时候这样也不行，需要再增加一个command:/bin/bash，命令不一定是这个，需要是一个不会退出的命令，然后用-d后台启动容器。Referencesdocker-compose启动容器后自动退出...

avatar 云原生