如何让本地项目部署到服务器上

114 阅读2分钟

前言

练手项目nodejs+koa+mysql+sequlize 开发后台管理项目,前端利用vue3+vite+pinia+element-plus技术栈,自己写了一些小工具,爬虫、抓包、个性化打印功能、在线编辑器等功能。

购买服务器

这里我选择腾讯云服务器,服务器选择还是挺多的,阿里云、华为云、百度云等,我买的是最基础的入门级的,练练手。 购买后去管理页面控制台,配置实例,安全组,防火墙等

实例

我买的实例是Windows Server-SDF6,之前配置Linux,这次为了快速部署,走了一遍windows,没想到坑太多了。 image.png

配置安全组和防火墙

安全组

image.png

防火墙

image.png

连接服务器远程桌面

连接上服务器远程桌面服务器后就相当远程控制一台电脑一样。然后就是各种下载安装,MySql、Redis、宝塔Windows版本等软件安装。

MySql和Redis

需要配置mySql用户访问权限和宝塔mysql创建,创建后可以使用其他ip机来操作数据库。生产环境数据库表创建,在本地进行表结构导出,生产环境运行SQL文件就行了。 Redis 安装与配置,这里注意Redis 端口要在服务器安全组配置。

本地项目上传到服务器上

这里可以利用git拉取本地项目,也可以利用宝塔文件上传。 自己找个服务器文件放置。

image.png

配置Nginx

#user  nobody;
worker_processes  1;

events {
    worker_connections  1024;
}

http {
    include       mime.types;
    default_type  application/octet-stream;
    sendfile        on;
   
    keepalive_timeout 60s;

    gzip  on;
    
    server {
        listen    6001;
        server_name  43.xx.xx.92;

        #proxy_set_header X-Forwarded-Host $host;
        #proxy_set_header X-Forwarded-Server $host;
        #proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;

       
        
        location / {
            #项目所在地址
            root C:/wwwroot/memo-vue3-admin-pro/dist/;
            
            #判断窗口大小,切换pc h5包
           if ($http_user_agent ~* 'mobile|nokia|iphone|ipad|android|samsung|htc|blackberry'){
              root  C:/wwwroot/h5/dist/;
           }
		   index index.html index.htm;
		    #配合vue-router的history模式
		    #try_files $uri $uri/ @router;
	     }
         
         location /h5/ {
           root  C:/wwwroot/h5/dist/;
		   index index.html index.htm;
	     }
         
      location @router {
		rewrite ^.*$ /index.html last;
       }
       
       location /api/ {
            proxy_pass http://localhost:6000/;
            proxy_connect_timeout 600;
            proxy_read_timeout 600;
        }
    } 
}


启动服务器后台项目 配置端口是6000,前端项目端口是6001

image.png