腾讯云服务器部署node应用-部署vue应用

221 阅读1分钟

上传静态文件

登陆kim账号 创建目录/var/www/pages
修改权限sudo chmod 777 pages
现在我本地有一个vue项目,my_project,执行npm run build打包成静态文件 切换到项目的根目录下
执行sudo scp -r ./dist/* kim@49.235.172.41:/var/www/pages把dist内的文件全部上传到服务器的/var/www/pages目录下。

kim@VM-0-12-ubuntu:/var/www/pages$ ll
total 16
drwxrwxrwx 3 root root 4096 Feb  3 08:52 ./
drwxr-xr-x 5 root root 4096 Feb  3 08:47 ../
-rw-r--r-- 1 kim  kim   512 Feb  3 08:52 index.html
drwxr-xr-x 6 kim  kim  4096 Feb  3 08:52 static/
kim@VM-0-12-ubuntu:/var/www/pages$

配置nginx

sudo vi /etc/nginx/sites-available/default,把最开始的node示例项目替换掉。
现在的nginx配置为

location  /catalog{
    proxy_set_header X-Real-IP $remote_addr;
    proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
    proxy_set_header Host $http_host;
    proxy_set_header X-Nginx-Proxy true;
    proxy_set_header Connection "";
    proxy_set_header Cookie $http_cookie;
    proxy_pass http://127.0.0.1:3000;
}
location / {
    root /var/www/;
    index index.html;
}

刷新浏览器

后续

我们实现了一个静态页面的部署和一个node项目的部署,虽然只是简单的初步实现,但是初学用来练手还是挺合适的。更多的优化和改进要继续探索。

  • history路由模式的vue项目部署
  • 域名连接
  • 实现https访问

参考

Ubuntu部署nodejs应用-Docker
Vue项目打包部署总结
pm2 使用教程 How To Set Up a Node.js Application for Production on Ubuntu 16.04