个人博客开发总结-项目创建到项目部署

用户3816345271183
228 阅读5分钟

前言

虽然之前有写过博客项目，但是并没有系统的从零开始到项目部署，所以这次寒假就从零开始写了这个项目用来记录学习和成长。

项目构建

项目的技术栈是vue3+less+极少的element-plus

1.使用vue-cli创建项目

项目基本配置如下 QQ截图20220220172632.png

2.项目目录及结构

项目的结构参考了很多vue项目，基本结构都是差不多吧，我这里少了test、mock等


├── public                          // 静态页面

├── src                             // 主目录

    ├── assets                      // 静态资源
    
    ├── components                  // 全局组件

    ├── store                       // vuex 配置

    ├── less                        // 基本的less样式

    ├── utils                       // 全局方法(axios封装，markdown...)

    ├── views                       // 路由组件

    ├── App.vue                     // 页面主入口

    ├── main.ts                     // 脚本主入口

├── .eslintrc.js                    // eslint 相关配置

├── .gitignore                      // git 忽略文件配置

├── babel.config.js                 // bable 配置

├── package.json                    // 依赖

├── README.md                       // 项目 readme

└── vue.config.js                   // vue-cli/webpack 配置

2.引入element-plus

现在element-plus的按需引入官网已经说的很明白。

  1. 安装unplugin-vue-components 和 unplugin-auto-import这两款插件
npm install -D unplugin-vue-components unplugin-auto-import
  1. 配置vue.config.js
const { ElementPlusResolver } = require('unplugin-vue-components/resolvers')
configureWebpack: {
      plugins: [
        require('unplugin-auto-import/webpack')({
          resolvers: [ElementPlusResolver()],
        }),
        require('unplugin-vue-components/webpack')({
          resolvers: [ElementPlusResolver()],
        }),
      ],
    },

项目开发

这一步开发就行了，具体的总结见其他文章

项目部署

我在项目部署阶段踩到的坑比前面两个阶段都要多得多，兜兜转转了好几天才成功部署，而且因为身份证丢了无法备案，所以暂时无法通过域名访问。

1.部署流程

  • 在阿里云/腾讯云等购买好服务器
  • 开发完前端以及后端项目
  • 在服务器上安装必要环境（如MongoDB，node，python等）
  • 在服务器上安装Nginx及必须插件，并配置Nginx来支持http
  • 将代码上传至gitee/github，然后在服务器上拉取代码到服务器（如果仓库是private的需要添加服务器密钥到gitee/github）
  • 启动项目以及Nginx

2.部署细节

购买和开发阶段没什么好说的，直接做就ok

1.在服务器上安装与配置

我是使用的xShell与远程服务器进行的连接，这样传输文件等都很方便，也可以使用别的软件。

各个环境的安装参照官网一点点安装就可并不难，其中Nginx的安装和配置稍微有些复杂。

具体可以参照这个进行配置，网上教程很多 别的也可以。下面是我的配置的信息

http {
    include       mime.types;
    default_type  application/octet-stream;
    sendfile        on;
    #tcp_nopush     on;
    #keepalive_timeout  0;
    keepalive_timeout  65;

    server {
        listen 443 ;
        location / {
                //这里很重要，因为vue/react项目使用histroy模式时会出现刷新空白的情况，
                //这里会在路由不匹配时转到首页，详情请看vue-cli官方文档
                try_files $uri $uri/ /index.html; 
                root home/blog;
                index  index.html index.htm;
                }
        error_page   500 502 503 504  /50x.html;
        location = /50x.html {
            root   html;
                }
        location /api/ {
                proxy_pass http://150.158.103.244:3000/;
                }
        }
}

2.启动项目

这里我后端项目用的node，用的pm2启动防止报错项目之间挂掉

安装：npm install -g pm2

启动：pm2 start ./project

3.支持https

支持http的项目之前弄过不少，但是支持https的项目还没有弄过，谁不想自己的项目的导航栏上有个小绿锁呢。

支持https是最大的坑，虽然现在细想也没什么东西，但是第一次弄真的是不懂

1.购买域名、ssl证书以及备案

这三步在腾讯云/阿里云都可以直接完成，域名需要花点钱，ssl证书可以先用免费的，备案需要准备好身份证。

需要注意的是买了域名之后一定记得绑定ip地址，不要像我一样傻乎乎的连这个都忘了，同时没有备案的国内域名也是不能用的，请注意这点。

2.Nginx配置

关于Nginx各项配置的含义及配置方法，我是参考了这篇文章nginx location配置详细解释 ，并且你在腾讯云/阿里云购买证书以后它会给你提供详细的配置说明。

下面放出我的配置

http {
    include       mime.types;
    default_type  application/octet-stream;

    sendfile        on;
    keepalive_timeout  65;

    server {
        listen 80;
        server_name 你的域名;
        return 301 https://$host$request_uri;
}
    server {
        listen 443 ssl;
        server_name 你的域名;

        ssl_certificate 你的域名.crt;
        ssl_certificate_key 你的域名.key;
        ssl_session_timeout 5m;
        ssl_protocols TLSv1.2 TLSv1.3;
        ssl_ciphers ECDHE-RSA-AES128-GCM-SHA256:ECDHE:ECDH:AES:HIGH:!NULL:!aNULL:!MD5:!ADH:!RC4:!DH:!DHE;
        ssl_prefer_server_ciphers on;
        location / {
                try_files $uri $uri/ /index.html;
                root home/blog;
                index  index.html index.htm;
                }
        error_page   500 502 503 504  /50x.html;
        location = /50x.html {
            root   html;
                }
        location /api/ {
                proxy_pass http://150.158.103.244:3000/;
                }
        //gzip
        gzip on;

        gzip_buffers 32 4k;

        gzip_comp_level 6;

        gzip_min_length 200;

        gzip_types text/css text/xml application/javascript;

        gzip_vary on;

        }
}

3.前后端项目支持https

这一步主要是把开发时所有的http请求全部换成https请求，包括图片、axios等请求，如果不做这一步网站会提示你页面不安全

当然你也可以像我上面配置中的那样，使用来代理转发https

location /api/ {
                proxy_pass http://150.158.103.244:3000/;
                }

项目优化

之前写项目的时候写的都很随意，也不是很在意优化、访问速度之类的。但是这次开发完成把项目部署完毕之后，访问速度到达了惊人的15s！！！这还访问啥啊，于是进行了一系列优化，目前项目的访问速度已经小于1s，虽然还是不算快但是总归是能用了。

我的优化方法基本来自这篇文章Vue 项目性能优化 — 实践指南（网上最全 / 详细），除此之外还有一些小技巧。

1.查看打包后各项占比

安装

npm install webpack-bundle-analyzer –save-dev

vue.config.js配置

    chainWebpack: config => {
      // 查看打包文件体积大小
      config
        .plugin('webpack-bundle-analyzer')
        .use(require('webpack-bundle-analyzer').BundleAnalyzerPlugin)
  
    },

2.Nginx启动gzip

开启gzip和部分包按需引入是我在优化过程中提升最大的操作

nginx.conf配置

gzip on;

        gzip_buffers 32 4k;

        gzip_comp_level 6;

        gzip_min_length 200;

        gzip_types text/css text/xml application/javascript;

        gzip_vary on;

结语

关于个人博客的从创建到部署优化就结束了，开发过程中的问题以后单独总结。

avatar
文章
阅读
粉丝