前端Vue项目部署

一、Mac-Nsginx部署

1. 安装nginx

Brew install nginx

资源文件目录 : /usr/local/var/www

nginx配置文件目录: /usr/local/etc/nginx

2. 将项目放到资源文件目录里

3. 配置nginx

• 在nginx配置文件的目录下新建文件夹 名称任意

• 编写个人项目的配置文件

server {
      listen 9999;#监听端口
      server_name localhost;#监听域名
      charset utf-8;#指定网页的编码格式
      #网站的配置
      location / {#项目一
          root /usr/local/var/www/blueWhale;
          index index.html;
          try_files $uri $uri/ /index.html;
      }
  }

• 将个人的配置文件添加到nginx.conf中,修改/usr/local/etc/nginx目录下的nginx.conf文件

4. 重启nginx并查看访问

brew services restart nginx

二、Ubuntu-Docker 部署

1. 在项目中创建docker 文件夹,配置default.conf

server {
    listen       80;
    server_name  localhost;

    #charset koi8-r;
    access_log  /var/log/nginx/host.access.log  main;
    error_log  /var/log/nginx/error.log  error;

    location / {
        root   /usr/share/nginx/html;
        index  index.html index.htm;
        #  注意⚠️：如果vue-router使用的是history模式，try_files $uri $uri/ /index.html;  非常重要！！！
        # 如果使用了hash模式，可以省略这个
        try_files $uri $uri/ /index.html;
    }
}

2. 创建Dockerfile文件

# 设置基础镜像
FROM nginx
# 将dist文件中的内容复制到 /usr/share/nginx/html/ 这个目录下面
COPY dist/  /usr/share/nginx/html/
# 用本地的 default.conf 配置来替换nginx镜像里的默认配置
COPY docker/default.conf /etc/nginx/conf.d/default.conf

3. 创建docker镜像

sudo docker build -t vue_docker .

vue_docker: 镜像名称

4. 查看并运行镜像

docker images

sudo docker run -d -p 8000:80 --name vue-test vue_docker:latest

5. 设置服务器防火墙规则,这里打开的服务器的8000端口

三、Mac-k8s 集群部署

1. Mac 安装Docker、安装K8s

www.runoob.com/docker/maco…

安装完docker以后,打开设置,开启k8s

这个时候k8s相关的命令便可以使用

2. 将vue项目的docker镜像进行上传到dockerhub

• 查看镜像 sudo docker images

• 给要上传的镜像打标签

• 登录个人dockerhub sudo docker login docker.io

• 上传个人的镜像到dockerhub sudo docker push moreface/vue_test:2.0

可以看到个人上传的镜像

3. 配置Pod资源类型的yml文件并运行

// kube/test/yml
apiVersion: v1
kind: Pod
metadata:
  name: my-first-demo
  labels:
    app: my-first-demo
spec:
  containers:
    - name: my-first-demo
      image: moreface/vue_test:1.0
      ports:
        - containerPort: 80

根据yml创建应用, 即将应用部署到k8s中,kubectl create -f kube/test.yml 这个时候可以看到项目的运行状态

4. 配置Svc资源类型的yml文件,进行内部端口的暴露

apiVersion: v1
kind: Service
metadata:
  name: my-first-demo-svc
  labels:
    app: my-first-demo
spec:
  type: NodePort
  ports:
    - port: 80
      nodePort: 30000
  selector:
    app: my-first-demo

将svc应用部署到k8s中, kubectl create -f kube/service.yml,这个时候就可以看到svc服务的运行状态

5. 此时访问本机的30000端口就可以访问到项目

6. 关于kubectl的一些命令

运行应用: kubectl create/apply -f **.yml

删除应用: kubectl delete pod my_pod 删除名称为 my_pod 的 Pod。

删除所有类型的应用 kubectl delete pod –all 删除所有pod的应用

获取资源信息: kubectl get pod 获取pod资源类型的应用

\