从静态网页到vue+node项目服务器部署（全）

前提

从零搭建Hexo博客并部署阿里云服务器（奶妈级教学）

首先看这个链接 将服务器和域名购买

第一 静态项目 IP访问

使用类似IP(xxx.xxx.xxx.xxx)访问

准备工作：

1.写一个静态的html文件

//目录结构
html
	css
	js
	images
	index.html

2.安装nginx

​ nginx的配置文件

/etc/nginx/nginx.conf

这里面我推荐上文链接通过include方式进行配置conf

3.进行配置

server{
	listen   80;
	root /home/www/website/html;#推荐放在home中  将html文件放在 /home/www/website路径下
	server_name # 填阿里云的公网ip
	location /{
	}
}

第二 静态项目 域名访问

用类似域名(www.xxx.xxx)访问

准备工作

1.写一个静态的html文件（如上）

2.安装nginx （如上）

3.购买域名

4.域名解析

3.进行配置

server{
	listen   80;
	root /home/www/website/html;#推荐放在home中  将html文件放在 /home/www/website路径下
	server_name  #填购买的域名
	location /{
	}
}

第三 前后端开发项目配置

使用vue+node进行开发

1. vue项目进行打包上传dist
2. node使用express框架进行开发 服务器端使用pm2启动
3. 安装nginx 购买域名 域名解析（如上）
4. 配置(vue项目 vue.config.js)

//http://xxx.xxx.xxx.xxx:xxxx(端口号 需要开启才可以外网访问)
module.exports = {
  //跨域部分配置
  devServer: {
    proxy: {
      '/devapi': {
        target: 'http://xxx.xxx.xxx.xxx:xxxx',//购买的域名
        changeOrigin: true, //是否跨域
        pathRewrite: {
          '^/devapi': ""
        }
      }
    }
 }

服务器端配置 nginx.conf

#http://xxx.xxx.xxx.xxx:xxxx(端口号 需要开启才可以外网访问)
server{
	listen 80;
	root /home/www/website/html; #推荐放在home中  将html文件放在 /home/www/website路径下
	server_name www.xxx.xxx; #购买的域名
        location /devapi {
	    rewrite  ^.+devapi/?(.*)$ /$1 break;
            proxy_pass  http://xxx.xxx.xxx.xxx:xxxx; #node项目开启的服务
            gzip on;
            gzip_min_length 1k;
            gzip_comp_level 9;
            gzip_types text/plain application/javascript application/x-javascript text/css application/xml text/javascript application/x-httpd-php image/jpeg image/gif image/png;
            gzip_vary on;
            gzip_disable "MSIE [1-6]\.";
            proxy_redirect off;
            proxy_set_header Host $host;
            proxy_set_header X-Real-IP $remote_addr;
            proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
         }
}

ssl证书申请

ssl证书申请

server {
    listen 443 ssl;
    #配置HTTPS的默认访问端口为443。
    #如果未在此处配置HTTPS的默认访问端口，可能会造成Nginx无法启动。
    #如果您使用Nginx 1.15.0及以上版本，请使用listen 443 ssl代替listen 443和ssl on。
    server_name xxx.xxx.xxx; #需要将yourdomain.com替换成证书绑定的域名。
    root /home/www/website/html; #推荐放在home中  将html文件放在 /home/www/website路径下
    index index.html index.htm;
    ssl_certificate cert/xxx.pem;  #需要将cert-file-name.pem替换成已上传的证书文件的名称。
    ssl_certificate_key cert/xxx.key; #需要将cert-file-name.key替换成已上传的证书密钥文件的名称。
    ssl_session_timeout 5m;
    ssl_ciphers ECDHE-RSA-AES128-GCM-SHA256:ECDHE:ECDH:AES:HIGH:!NULL:!aNULL:!MD5:!ADH:!RC4;
    #表示使用的加密套件的类型。
    ssl_protocols TLSv1 TLSv1.1 TLSv1.2; #表示使用的TLS协议的类型。
    ssl_prefer_server_ciphers on;
}

软件推荐下载

finalshell

finalshell 简单介绍使用