前端+node.js(vue+express)部署到阿里云

vue+express部署到阿里云

使用的阿里云服务器CentOS 7.3

一,登陆对应的服务器

图片描述

二,在服务器进行对应的初始化

yum install -y nginx
yum install -y nodejs
yum install -y mariadb
npm install pm2 -g
npm install express -g

1.初始化数据库html

mysql_secure_installation         #直接执行初始化命令,会弹出交互配置信息
Enter current password for root (enter for none):#初次进入密码为空,直接回车
New password:                #输入要为root用户设置的数据库密码。
Re-enter new password:            #重复再输入一次密码。
Remove anonymous users? [Y/n] y      #删除匿名账号
Disallow root login remotely? [Y/n] n     #是否禁止root用户从远程登陆
Remove test database and access to it? [Y/n] y  #是否删除test数据库,想留着也随意
Reload privilege tables now? [Y/n] y        #刷新受权表,让初始化后的设定当即生效

2.登陆数据库
mysql -u root -p前端

建立对应的数据库,执行对应的sql文件vue

navicat链接阿里云数据库node

阿里云开放mysql的3306端口mysql

1.登入mysql
2.GRANT ALL PRIVILEGES ON . TO 'root'@'%' IDENTIFIED BY '您的数据库密码' WITH GRANT OPTION;
3.flush privileges;nginx

navicat配置以下sql

图片描述
图片描述

三,将前端项目进行打包

npm run bulid数据库

打包完成后将对应的dist文件上传到服务器express

图片描述

将服务端上传npm

四,配置nginx

使用find命令查找对应的nginx目录
图片描述

find / -name nginx
cd /etc/nginx
vim nginx.conf

图片描述

进入nginx的配置文件,配置server。

server {
        listen       80 default_server;
        listen       [::]:80 default_server;
        server_name  47.102.100.226;   #有域名的话替换成域名
        root         /usr/share/nginx/html;

        # Load configuration files for the default server block.
        include /etc/nginx/default.d/*.conf;

        location / {
         root /usr/code/dist/;   #你的打包项目上传的目录
         index index.html;
        }
        location /api/{
         proxy_pass http://127.0.0.1:3000;  #配置的路径代理
        }

        error_page 404 /404.html;
            location = /40x.html {
        }

        error_page 500 502 503 504 /50x.html;
            location = /50x.html {
        }
    }

保存对应的文件,重读nginx配置

nginx -s reload

若是失败,尝试如下

nginx -c /etc/nginx/nginx.conf

而后再次重启

仍是不行的话

service nginx stop
service nginx start

五,阿里云开放对应的端口

这里须要开放mysql 的3306端口 //外网navicat链接数据库
须要开放http的80端口
须要开放express默认的3000端口

六,进入服务器的目录

执行

npm install
npm start

能够进入网页进行测试,若是配置正常,便可正常访问网页,

若是请求发生404,在服务器项目中的路由进行以下配置

修改路由,即在app.js,增长一个api

图片描述

七,服务器永久运行

pm2 start bin/www
相关文章
相关标签/搜索